Rails 5.1中JQuery Ajax自动补全功能失效求助

1. 字段ID匹配错误 #

你提到生成的字段ID是trip_permits_vehicles_form_registration_number，但JS代码里的选择器写的是#trip_permit_vehicle_form_registration_number——少了一个s（vehicles被写成了vehicle），这会导致JS找不到目标元素，自然无法绑定自动补全事件。

修正JS里的选择器：

$("#trip_permits_vehicles_form_registration_number").autocomplete({
  // 其余代码保持不变
});

2. 确认JQuery UI已正确引入 #

JQuery本身没有autocomplete方法，这个功能是JQuery UI提供的。如果项目只引入了JQuery而没加JQuery UI，代码会直接报错。

检查项目的application.js或页面脚本加载顺序，确保包含JQuery UI：

// application.js
//= require jquery
//= require jquery-ui
//= require materialize
// ... 其他依赖

3. 适配Rails Turbolinks #

Rails 5默认启用Turbolinks，$(document).ready只会在页面首次加载时触发，后续页面切换时不会执行。改用Turbolinks的加载事件：

$(document).on('turbolinks:load', function () {
  $("#trip_permits_vehicles_form_registration_number").autocomplete({
    // 其余代码保持不变
  });
});

4. 排查Materialize冲突 #

Materialize会自动初始化表单元素，可能和JQuery UI的自动补全功能产生冲突。可以尝试：

• 调整加载顺序：先加载JQuery → JQuery UI → Materialize
• 给目标输入框添加no-autoinit类，禁用Materialize的自动初始化：

= v.text_field :registration_number, input_html: { class: 'force-upcase no-autoinit' }

5. 验证路由与控制台错误 #

• 打开浏览器开发者工具的Console标签，查看是否有JS报错（比如autocomplete is not a function、Cannot read property 'autocomplete' of null等），这些错误会直接指明问题根源。
• 检查routes.rb是否正确定义了目标路由：

# routes.rb
namespace :customers do
  resources :trip_permits do
    get :autocomplete_vehicle_registration_number, on: :collection
  end
end

运行rails routes确认路由是否存在，且请求方式为GET。

6. 简化测试代码 #

先简化JS代码，排除其他逻辑干扰，确认Ajax请求能触发：

$(document).on('turbolinks:load', function () {
  $("#trip_permits_vehicles_form_registration_number").autocomplete({
    source: '/customers/trip_permits/autocomplete_vehicle_registration_number',
    minLength: 2,
    search: function() {
      console.log('搜索事件触发了');
    }
  });
});

然后在浏览器Network标签下，输入2个字符后查看是否有请求发出。

内容的提问来源于stack exchange，提问作者Jeff S