jQuery Autocomplete在Rails 4中不起作用 [英] jQuery Autocomplete doesn't work in Rails 4

问题描述

我正尝试将Railscast中所述的jQuery UI Autocomplete集成到我的Rails 4.0应用程序中: 102-AutoCompleteAssociationRevised .

不幸的是，自动完成功能不起作用.尽管呈现的HTML看起来不错，但我没有任何建议:

<input id="plan_part_name" type="text" name="plan[part_name]" data-autocomplete-source="["foo","food","foobar"]"></input>

我也停用了Turbolinks，但没有任何变化...

在我的Gemfile中，我包含了gem 'jquery-ui-rails'，而我的 application.js 看起来像这样:

//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require_tree .

这是我正在使用的表单， edit.html.erb :

<%= form_for [@project, @plan], remote: true, html: { id: "edit-form-#{@plan.id}" } do |f| %>
  <%= f.text_field :title %>

  <%= f.text_field :part_name, data: {autocomplete_source: %w[ foo food foobar ]}  %>

  <%= f.submit "Update" %>
<% end %>

autocomplete.js.coffee:

autocomplete = ->
  $('#plan_part_name').autocomplete
    source: $('#plan_part_name').data('autocomplete-source')

$(document).ready(autocomplete)
$(document).on('page:load', autocomplete)

解决方案

我找到了解决方法:

我的编辑表单是由Ajax请求呈现的，因此我不得不将Javascript文件(autocomplete.js.coffee)从以下位置更改:

$(document).on('page:load', autocomplete)

收件人:

$(document).on('page:update', autocomplete)

才能与Turbolinks一起正常工作.您可以在《 Turbolinks自述文件》 中找到更多信息. >

I'm trying to integrate jQuery UI Autocomplete in my Rails 4.0 application like described in this Railscast: 102-AutoCompleteAssociationRevised.

Unfortunately, the autocompletion doesn't work. I don't get any suggestions although the rendered HTML looks fine:

<input id="plan_part_name" type="text" name="plan[part_name]" data-autocomplete-source="["foo","food","foobar"]"></input>

I also deactivated Turbolinks, but nothing changed...

In my Gemfile I included gem 'jquery-ui-rails' and my application.js looks like this:

//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require_tree .

This is the form, that I'm using, edit.html.erb:

<%= form_for [@project, @plan], remote: true, html: { id: "edit-form-#{@plan.id}" } do |f| %>
  <%= f.text_field :title %>

  <%= f.text_field :part_name, data: {autocomplete_source: %w[ foo food foobar ]}  %>

  <%= f.submit "Update" %>
<% end %>

autocomplete.js.coffee:

autocomplete = ->
  $('#plan_part_name').autocomplete
    source: $('#plan_part_name').data('autocomplete-source')

$(document).ready(autocomplete)
$(document).on('page:load', autocomplete)

解决方案

I found the solution:

My edit form got rendered by Ajax request so I had to change the Javascript file (autocomplete.js.coffee) from:

$(document).on('page:load', autocomplete)

to:

$(document).on('page:update', autocomplete)

to work work properly with Turbolinks. You'll find more information in the Turbolinks Readme.

这篇关于jQuery Autocomplete在Rails 4中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！