Jquery ui自动完成不适用于rails 4.2

Question

我正在开发 Rails 4.2 应用程序（使用 Bootstrap）并尝试在文本字段中设置自动完成功能。我正在关注 Railscasts 自动完成关联 episode:

我的 application.js 看起来像：

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require turbolinks

我的 application.css 包含：

 *
 *= require_tree .
 *= require_self
 *= require jquery-ui
 */

模型“modelname”包含一个文本字段“email”。 在模型名的视图文件 new.html.erb 中，我有：

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@modelname) do |f| %>
    <%= f.label "EmailId" %>
    <%= f.text_field :email %>
    <%= f.submit "Create", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

在 app\assets\javascripts\modelnames.coffee 文件中，我添加了自动完成源：

jQuery ->
    $('#modelname_email').autocomplete
        source: ['abc', 'def', 'ade', 'dge', 'ghi']

但是当我开始在“modelname_email”文本字段中输入时，自动完成功能没有出现。

我是否遗漏了任何必需的步骤？

编辑：我还读到 Turbolinks 有时会导致 jquery 出现问题，这可能是这里的原因吗？我尝试了一些更改，但没有效果。

Answer 1

我无法让 jquery-ui 的自动完成功能工作，所以我使用了 rails4-autocomplete gem，到目前为止它已经工作了。

以下是我遵循的步骤：

1. 在 gemfile 中，添加以下条目：

   gem 'rails4-autocomplete'

2. 在 app\assets\javascripts\application.js 中，添加以下条目（我在“//= require turbolinks”条目之前添加了它）：

   //= 需要自动完成轨道

3. 在 config\routes.rb 中（模型名称是“employee”，我需要自动完成的字段是“email”）：

   resources :employees do
       get :autocomplete_employee_email, :on => :collection
   end
   

4. 在 employees\new.html.erb 中（这包含“电子邮件”的文本字段，我需要自动完成才能工作）（请参阅代码注释）：

5. 最后在 app\controllers\employees_controller.erb 中：

   def autocomplete_employee_email

   term = 参数[:term]

   if term && !term.empty?

   items = Employeee.select("distinct email"). where("LOWER(email) like ?", term.downcase + '%'). limit(10).order(:email)

   其他

   项目 = {}

   结束

   render :json => json_for_autocomplete(items, :email)

   结束

Answer 2

JQuery 需要在您的清单中列在 require_tree 之前。

应用程序.css

 *
 *= require_self
 *= require jquery-ui
 *= require_tree .
 */

应用程序.js

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