jQuery Autocomplete не работает в Rails 4

Question

Я пытаюсь интегрировать автозаполнение jQuery UI в мое приложение Rails 4.0, как описано в этом Railscast: 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) 

Answer 1

Я нашел решение:

Моей форму редактирования получила оказываемую запросу Ajax, так что я должен был изменить файл Javascript (autocomplete.js.coffee) от:

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

к:

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

работать правильно работать с Turbolinks. Более подробную информацию вы найдете в файле Turbolinks Readme.

Answer 2

Если вы разместили обработанную HTML правильно, то это не выглядит хорошо для меня:

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

Это приводит к data-autocomplete-source="[", которые не могут анализируется как JSON или URL. Правильная разметка должна выглядеть следующим образом:

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