Rails3中-的jQuery，自动完成 [英] rails3-jquery-autocomplete

问题描述

我下面的教程这里 https://github.com/crowdint/rails3-jquery有关Rails3中jQuery的自动完成-autocomplete应用。一切完美，除了自动完成！

I am following tutorials here https://github.com/crowdint/rails3-jquery-autocomplete-app about rails3 jquery autocomplete. Everything works perfectly, except for auto-complete!

下面是我使用的方法。

1. 在Gemfile中，我添加了宝石Rails3中-的jQuery-自动完成'。


2. 我使用生成的文件自动完成轨摹自动完成：安装


3. 我下载JavaScript文件


4. 我包含在布局中的JavaScript文件通过
   ＆LT;％= javascript_include_tag'的jquery-1.4.2.min.js'，'的jQuery-UI-1.8.4.custom.min.js，自动完成-rails.js'，'rails.js％>
   ＆LT;％= stylesheet_link_tag'的jQuery-UI-1.8.4.custom.css％>


5. 创出了品牌模型的名称由字符串轨G型品牌名称：字符串，并通过Brand.create增加了几个项目到品牌。（：名称=>'阿尔法'）


6. 创建控制器轨道摹控制器迎宾表演，并编辑routes.rb中通过
   得到欢迎/秀
   根：为=>欢迎＃秀


7. 新增自动完成：品牌：名在app /控制器/ welcome_controller.rb


8. 新增得到'欢迎/ autocomplete_brand_name'，在配置/ routes.rb中


9. 在应用程序/视图/首页/ show.html.erb：
   ＆LT;％=的form_tag DO％>
   ＆LT;％= autocomplete_field_tag​​'名'，''，welcome_autocomplete_brand_name_path％>
   ＆LT;％结束％>

基本上我跟着除了最后一个教程的每一步（我觉得应该autocomplete_field_tag​​而不是text_field_tag​​的名字）。但是，自动完成不起作用。我是新来的Rails，挣扎着在这几天。任何人都可以在这个问题上抛出一些轻？

Basically I followed every step in the tutorial except the last one(I found it should be autocomplete_field_tag instead of text_field_tag 'name). However, autocomplete does not work. I am new to Rails and struggled on this for days. Anyone could throw some light on this issue?

谢谢！

推荐答案

我一直在痛苦完全相同的问题（Rails的3.2.1和使用演示应用程序的教程）。我也有关于这是怎么回事，这使我的解决方案的更多信息。希望它为你工作！

I have been suffering exactly the same problem (Rails 3.2.1 and using the demo app tutorial). I also have more information about what's going on, which has led me to a solution. Hope it works for you!

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

My console log was showing the following error:

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-挑战​​（即我）在codeS是

For the ASCII-challenged (ie me) the codes are

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

所以URI它试图得到的是

So the URI it's trying to GET is

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

该路由器是不快乐的。

which the router is not happy about.

当你在为渲染网页的HTML源代码，它看起来像：

When you look at the pages HTML source as rendered, it looks like:

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

这表明从.erb文件中的参数被泄露通过。我修改表单的内容有：

which shows that the arguments from the .erb file are leaking through. I modified the contents of my form to have:

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

IE没有的：自动完成=> 的建议在本教程中，现在它为我工作。你的样品code显示你已经有这个，所以你可以从下面的问题，我也改变是痛苦：

IE without the :autocomplete => as suggested in the tutorial, and now it is working for me. Your sample code shows you already have this, so you may be suffering from the following issues that I also changed:

在我设法把重点放在previous点，我的控制台日志正发出各种的抱怨没有找到的.css和.js文件。我已经结束了从公开/ JavaScript的和公开/样式表转移所有文件到新的应用/资产/ JavaScript的和应用程序/资产/样式表，然后修改主的application.js 和 application.css 文件，也主要布局的内容：

Before I managed to focus on the previous points, my console log was issuing all sorts of complaints about not finding the .css and .js files. I've ended up shifting all the files from public/javascripts and public/stylesheets to the new app/assets/javascripts and app/assets/stylesheets, and then modifying the contents of the main application.js and application.css files, and also the main layout:

的应用程序/资产/样式表/ 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的确切版本号不同，不要忘了在我的例子来更改数字。

If the exact version numbers of your .js and .css are different, don't forget to change the numbers in my example.

最后的变化是删除建议增加的 application.html.erb 并依靠资产管道（即所有上述要求）。唯一的项目我有.css和.js文件的主要布局文件

The final change was to remove the suggested additions to the application.html.erb and rely on the asset pipeline (ie all those requires above). The only items I have for .css and .js files in the main layout are

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

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

现在我已经得到了基本的工作，我可以回去尝试与HAML，Formtastic和nested_forms宝石使用它！希望不采取新的一天了我的生活。

Now I've got the basics working, I can get back to trying to use it with HAML, Formtastic and the nested_forms gem! Hope that doesn't take another day out of my life.

干杯

PS - 教程还表示，将

PS - the tutorial also says to put

gem 'rails', '3.0.0'

但因为你是使用Rails 3.2.1，把它作为原始的：

but since you're using Rails 3.2.1, leave it as the original:

gem 'rails', '3.2.1'

最后，漂亮的脚手架发电机倒不把事情的3.2.1标准的正确位置;转向它的公共/ JavaScript的公共/样式表文件到应用程序/资产的子目录。你必须编辑和合并漂亮的.css成默认的，你会在app /资产/样式表找到。

Finally, the nifty-scaffold generator is not quite putting things in the correct place for the 3.2.1 standards; shift it's files from public/javascripts and public/stylesheets into the app/assets subdirectories. You'll have to edit and merge nifty .css into the default one you'll find in app/assets/stylesheets.

这篇关于Rails3中-的jQuery，自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！