jQuery 自动完成功能在 Rails 4 中不起作用答案

【问题标题】：jQuery Autocomplete doesn't work in Rails 4jQuery 自动完成功能在 Rails 4 中不起作用
【发布时间】：2023-09-15 13:19:02
【问题描述】：

我正在尝试将 jQuery UI Autocomplete 集成到我的 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)

【问题讨论】：

您的 HTML 标记是否损坏（双引号内的双引号）？

标签： javascript jquery ruby-on-rails jquery-ui-autocomplete turbolinks

【解决方案1】：

我找到了解决办法：

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

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

到：

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

与 Turbolinks 一起正常工作。您可以在Turbolinks Readme 中找到更多信息。

【讨论】：