Rails3中,jQuery的自动完成

Question

我正在关注有关rails3 jquery autocomplete的https://github.com/crowdint/rails3-jquery-autocomplete-app的教程.一切都很完美,除了自动完成!

以下是我使用的程序.

1. 在gemfile中,我添加了"gem'rail3-jquery-autocomplete'"
2. 我使用"rails g autocomplete:install"生成了自动完成文件
3. 我下载了Javascript文件
4. 我通过<%= javascript_include_tag'jquery-1.4.2.min.js','jquery-ui-1.8.4.custom.min.js','autocomplete-rails.js','在布局中包含了Javascript文件. rails.js'%> <%= stylesheet_link_tag'jquery-ui-1.8.4.custom.css'%>
5. 通过"rails g model Brand name:string"创建名称为字符串的品牌模型,并通过Brand.create(:name =>'Alpha')将多个项目添加到Brand中.
6. 创建了一个控制器"rails g controller welcome show",并通过get"welcome/show"root编辑routes.rb:to =>"welcome#show"
7. 在app/controllers/welcome_controller.rb中添加了"autocomplete:brand,:name"
8. 在config/routes.rb中添加了"get'welcome/autocomplete_brand_name'"
9. 在app/views/welcome/show.html.erb中:<%= form_tag do%> <%= autocomplete_field_tag'name','',welcome_autocomplete_brand_name_path%> <%end%>

基本上我遵循了教程中的每一步,除了最后一步(我发现它应该是autocomplete_field_tag而不是text_field_tag'的名字).但是,自动完成功能不起作用.我是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-challenged(即我),代码是

%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文件的内容,以及还有主要布局:

应用程序/资产/样式表/ application.css:

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

应用程序/资产/ Java脚本/ 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的建议添加并依赖资产管道(即上述所有要求).我在主布局中为.css和.js文件提供的唯一项目是

应用程序/视图/布局/ application.html.erb:

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

现在我已经掌握了基础知识,我可以回过头来尝试将它与HAML,Formtastic和nested_forms宝石一起使用!希望不要再度过我生命中的一天.

干杯

PS - 教程也说要放

gem 'rails', '3.0.0'

但由于您使用的是Rails 3.2.1,请将其保留为原始版本:

gem 'rails', '3.2.1'

最后,漂亮的脚手架发电机并没有把东西放在3.2.1标准的正确位置; 将它的文件从public/javascripts和public/stylesheets转移到app/assets子目录中.您必须编辑并将漂亮的.css合并到您在app/assets/stylesheets中找到的默认值.css.