2

我在这里关注关于rails3 jquery自动完成的教程https://github.com/crowdint/rails3-jquery-autocomplete-app 。一切正常，除了自动完成！

以下是我使用的程序。

  1. 在 gemfile 中，我添加了“gem 'rails3-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 模型，并通过 Brand.create(:name => 'Alpha') 将几个项目添加到 Brand 中。
  6. 创建了一个控制器“rails g controller welcome show”，并通过get“welcome/show”root :to =>“welcome#show”编辑了routes.rb
  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 'name）。但是，自动完成功能不起作用。我是 Rails 的新手，为此苦苦挣扎了好几天。任何人都可以对这个问题有所了解吗？

谢谢！

4

2 回答 2

6

我遇到了完全相同的问题（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 %>

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

在我设法专注于前面的几点之前，我的控制台日志发出了各种关于找不到 .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 .

应用程序/资产/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的建议添加并依赖资产管道（即上述所有要求）。我在主布局中拥有的 .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 并将其合并到您可以在 app/assets/stylesheets 中找到的默认文件中。

于 2012-09-04T12:55:10.640 回答
1

我有类似的经历，在 OSX 上使用 Rails 3.2.8，在 Windows 上使用 3.2.9，并在此处遵循自动完成应用程序的教程：

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

如果我从 github 下载了示例应用程序，它编译并运行良好。如果我按照这些步骤操作，我将无法正常工作。示例应用程序中有很多其他的东西，所以我想要最精简的方式来与之交互。挖掘后，我发现除了按照步骤使事情正常工作之外，还需要进行以下更改。

  • 教程要求您将 jquery 和其他 js 文件复制到 public/javascript 中。不。将它们复制到 app/assets/javascript 和 app/assets/stylesheets 下。这个版本的 Rails 正在那里寻找它们，否则你会失败。

  • 去除

<%= javascript_include_tag :defaults %>

application.html.erb 文件中的行。它不存在，并且会在加载过程中导致错误。

  • rails 版本是 3.2.9 或 3.2.8，请确保您明确调用它。
gem 'rails', '3.2.9'
  • 确保您将 rails3-jquery-autocomplete 显式版本化为版本 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 文件头部分与我从 jqueryui.com 下载的最新 jquery 文件看起来像这样

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

我遇到的一件小事是 sqlite3 没有在 64 位 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。它们不一样，尽管输入字段的呈现方式相同，但使用错误标签时自动完成功能不起作用。

于 2012-11-20T23:11:36.347 回答