Rails3中，jQuery的自動完成

Question

我這裏https://github.com/crowdint/rails3-jquery-autocomplete-app是約Rails3中的jQuery自動完成以下教程。除了自動完成之外，一切都完美無缺！

下面是我所使用的方法。

1. 在Gemfile中，我添加了「寶石‘Rails3中，jQuery的自動完成’」
2. 我使用「軌道摹自動完成：安裝」生成自動完成文件
3. 我下載JavaScript文件
4. 我包含的JavaScript通過 <％= javascript_include_tag '的jquery-1.4.2.min.js'， '的jquery-UI-1.8.4.custom.min.js'， '自動完成-rails.js'，「rails.js在佈局文件「％> <％= stylesheet_link_tag '的jquery-UI-1.8.4.custom.css' ％>
5. 通過「rails g model品牌名稱：字符串」創建了一個名稱爲字符串的品牌模型，並通過Brand.create（：name =>'Alpha'）向品牌中添加了多個項目。
6. 創建控制器「軌摹控制器迎賓表演」，並通過 編輯routes.rb中得到「歡迎/秀」 根：到=>「歡迎＃秀」
7. 增加了「自動完成：品牌：名」在app /控制器/ welcome_controller.rb
8. 添加 「得到 '歡迎/ autocomplete_brand_name'」 中的config/routes.rb中
9. 在應用程序/視圖/首頁/ show.html.erb： <％=的form_tag DO％> <％= autocomplete_field_tag '姓名'， ''，welcome_autocomplete_brand_name_path％> <％端％>

基本上我遵循教程中除最後一步之外的每一步（我發現它應該是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-挑戰（即我）的代碼是

%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 %> 

即沒有：自動完成=>在本教程中建議，現在它爲我工作。你的示例代碼顯示你已經有了這個，所以你可能會遇到以下我也改變了的問題：

在我設法專注於前面幾點之前，我的控制檯日誌發出各種抱怨，沒有找到.css和.js文件。我已經結束了從公共/ JavaScript的和公共/樣式移的所有文件到新的應用程序/資產/ JavaScript的和應用程序/資產/樣式，然後修改主應用程序的內容.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 gem一起使用！希望這不會再耗費我一天的時間。

乾杯

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到默認的應用/資產/樣式表中。

Answer 2

我有類似的經歷，使用Rails 3.2.8在OSX和3.2.9的Windows，並按照自動完成應用這裏的教程：

https://github.com/crowdint/rails3-jquery-autocomplete-app

如果我從GitHub，它下載的示例應用程序編譯和工作正常。如果我遵循了這些步驟，我無法讓事情順利進行。示例應用程序中有一堆其他東西，所以我希望最簡單的方式與此交互。挖掘之後，我發現除了遵循讓事情正常工作的步驟外，還需要進行以下更改。

• 教程要求您將jquery和其他js文件複製到public/javascript中。別。將它們複製到app/assets/javascript和app/assets/stylesheets下。 Rails的這個版本在那裏尋找它們，否則你將會失敗。

• 從您的application.html.erb文件

<%= javascript_include_tag :defaults %>

線。它不存在並且會在加載過程中導致錯誤。

• rails版本是3.2.9或3.2.8，請確保你明確地調用它。

gem 'rails', '3.2.9' 

• 確保您明確版本的Rails3中，jQuery的自動完成功能，如下0.6.0版本。

source 'https://rubygems.org' 

gem 'rails', '3.2.9' 

# Bundle edge Rails instead: 
# gem 'rails', :git => 'git://github.com/rails/rails.git' 

gem 'sqlite3' 
gem 'rails3-jquery-autocomplete', '0.6.0' 
gem 'nifty-generators' 

# Gems used only for assets and not required 
# in production environments by default. 
group :assets do 
    gem 'sass-rails', '~> 3.2.3' 
    gem 'coffee-rails', '~> 3.2.1' 

    # See https://github.com/sstephenson/execjs#readme for more supported runtimes 
    # gem 'therubyracer', :platforms => :ruby 

    gem 'uglifier', '>= 1.0.3' 
end 

gem 'jquery-rails' 

我沒有改變的application.js文件在所有。

// 
//= require jquery 
//= require jquery-ui 
//= require jquery_ujs 
//= require_tree . 
// 

application.html.erb文件頭部分看起來是這個最新的jQuery的文件，我從jqueryui.com

<head> 
    <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title> 
    <%= stylesheet_link_tag "application" %> 

<%= javascript_include_tag 'jquery-1.8.2.js', 'jquery-ui-1.9.1.custom.min.js', 'autocomplete-rails.js', 'rails.js' %> 
<%= stylesheet_link_tag 'jquery-ui-1.9.1.custom.css' %> 
    <%= csrf_meta_tag %> 
    <%= yield(:head) %> 
    </head> 

下載我跑進也小的事情是不是裝上64的sqlite3位Windows。 解決方案是將sqlite3.dll複製到windows/system目錄中。不是windows或windows/system32，或者路徑上的任何地方，而不是ruby/bin。

最後，在早期版本的rails3-jquery-autocomplete中，支持text_field_tag。 github上的示例使用0.6.0作爲此gem的版本，並使用text_field_tag。對於像1.0.10這樣的更新版本，支持autocomplete_field_tag。它們並不相同，雖然輸入字段的顯示方式相同，但使用錯誤標記時，自動完成功能將不起作用。