ruby-on-rails-3 - rails3-jquery-自动完成

Question

我在这里学习教程 https://github.com/crowdint/rails3-jquery-autocomplete-app关于 rails3 jquery 自动完成。一切都完美无缺，除了自动完成!

下面是我使用的程序。

1. 在 gemfile 中，我添加了“gem ‘rails3-jquery-autocomplete’”
2. 我使用“rails g autocomplete:install”生成了自动完成文件
3. 我下载了 Javascript 文件
4. 我通过以下方式将 Javascript 文件包含在布局中<%= javascript_include_tag 'jquery-1.4.2.min.js', 'jquery-ui-1.8.4.custom.min.js', 'autocomplete-rails.js', 'rails.js' %><%= stylesheet_link_tag 'jquery-ui-1.8.4.custom.css' %>
5. 通过“rails g model Brand name:string”创建了一个名称为字符串的 Brand 模型，并通过 Brand.create(:name => 'Alpha') 添加了几个项目到 Brand 中。
6. 创建了一个 Controller “rails g controller welcome show”，并编辑了 routes.rb获得“欢迎/展示”root :to => "欢迎#show"
7. 在 app/controllers/welcome_controller.rb 中添加了“自动完成 :brand, :name”
8. 在 config/routes.rb 中添加“get 'welcome/autocomplete_brand_name'”
9. 在 app/views/welcome/show.html.erb 中:<%= form_tag 做 %><%=autocomplete_field_tag '名称', '', welcome_autocomplete_brand_name_path %><% 结束 %>

基本上我遵循了教程中的每一步，除了最后一步(我发现它应该是 autocomplete_field_tag 而不是 text_field_tag 'name)。但是，自动完成不起作用。我是 Rails 的新手，为此苦苦挣扎了好几天。任何人都可以阐明这个问题吗？

谢谢!

Answer 1

我一直遇到完全相同的问题(Rails 3.2.1 和使用演示应用程序教程)。我也有更多关于正在发生的事情的信息，这使我找到了解决方案。希望它对你有用!

我的控制台日志显示以下错误:

Started GET "/%7B:autocomplete=%3E%22/welcome/autocomplete_brand_name%22%7D?term=Al" for 127.0.0.1 at 2012-09-04 21:38:14 +1000
ActionController::RoutingError (No route matches [GET] "/%7B:autocomplete=%3E%22/welcome/autocomplete_brand_name%22%7D"):

对于 ASCII 挑战(即我)，代码是

%7B {  
%3E >  
%22 "  
%7D }  

所以它试图获取的 URI 是

/{:autocomplete=>"/welcome/autocomplete_brand_name"}?term=Al

路由器对此不满意。

当您查看呈现的页面 HTML 源代码时，它看起来像:

<input data-autocomplete="{:autocomplete=&gt;&quot;/welcome/autocomplete_brand_name&quot;}" id="name" name="name" type="text" value="" />

这表明来自 .erb 文件的参数正在泄漏。我将表单的内容修改为:

<%= form_tag do %>
  <%= autocomplete_field_tag 'name', '', welcome_autocomplete_brand_name_path %>
<% end %>

IE 不使用教程中建议的 :autocomplete =>，现在它对我有用。您的示例代码显示您已经拥有此代码，因此您可能会遇到以下我也已更改的问题:

在我设法专注于前面的几点之前，我的控制台日志发出了关于找不到 .css 和 .js 文件的各种提示。我最终将所有文件从 public/javascripts 和 public/stylesheets 转移到新的 app/assets/javascripts 和 app/assets/stylesheets，然后修改主 application.js 和 application.css 文件的内容，以及主布局:

app/assets/stylesheets/application.css:

*= require_self
*= require jquery-ui-1.8.23.custom
*= require_tree .

app/assets/javascripts/application.js:

//= require jquery-1.8.0.min
//= require jquery-ui-1.8.23.custom.min
//= require autocomplete-rails
//= require rails
//= require_tree .

如果您的 .js 和 .css 的确切版本号不同，请不要忘记更改我示例中的数字。

最后的更改是删除建议添加到 application.html.erb 并依赖 Assets 管道(即上述所有要求)。主布局中 .css 和 .js 文件的唯一项目是

app/views/layouts/application.html.erb:

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

现在我已经掌握了基础知识，我可以回去尝试将它与 HAML、Formtastic 和 nested_forms gem 一起使用!希望这不会让我的生活再多一天。

干杯

PS - 教程也说要放

gem 'rails', '3.0.0'

但由于您使用的是 Rails 3.2.1，因此请保留原始版本:

gem 'rails', '3.2.1'

最后，nifty-scaffold 生成器并没有完全按照 3.2.1 标准将内容放在正确的位置；将其文件从 public/javascripts 和 public/stylesheets 转移到 app/assets 子目录中。您必须编辑漂亮的 .css 并将其合并到默认的 app/assets/stylesheets 中。