如何将 jquery-ui 的自动完成功能添加到 Rails 5 项目？答案

【问题标题】：How to add autocomplete from jquery-ui to Rails 5 project?如何将 jquery-ui 的自动完成功能添加到 Rails 5 项目？
【发布时间】：2018-06-07 09:28:34
【问题描述】：

我正在尝试实现 jquery-ui 的自动完成功能，但似乎我遗漏了一些非常重要的东西。我正在关注Railscasts 的这些指南（也可在Youtube 上获得）。但我使用的是 Rails 5.1 和 yarn 而不是 gem。

另外我想提一下，我已经实现了 datepicker 和 tabs 并且运行良好。

这里是package.json的依赖：

  "dependencies": {
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"rails-ujs": "^5.2.0",
"turbolinks": "^5.1.1"
 },

所以在我的application.js 顶部我有这个：

//= require jquery
//= require jquery-ui/ui/widget
//= require jquery-ui/ui/widgets/datepicker
//= require jquery-ui/ui/widgets/autocomplete
//= require jquery-ui/ui/widgets/tabs

在底部：

$(document).on('turbolinks:load', function() {
  $("#high_edu_name").autocomplete({
    source: $('#high_edu_name').data('autocomplete-source')});
});

我在页面加载时收到以下错误：

TypeError: $(...).appendTo(...).menu is not a function

来自autocomplete.js:215:15

当我尝试在文本字段中输入内容时，我得到：

TypeError: keyCode is undefined

提前致谢！

【问题讨论】：

该错误表明 jquery ui 未正确加载。你在用 webpack 吗？
不，我使用的是香草 jquery-ui，是的，你是对的 - 我在下面写了我错的地方

标签： ruby-on-rails jquery-ui ruby-on-rails-5.1

【解决方案1】：

嗯，缺少关于通过 yarn 安装的文档令人尴尬……

我成功了 - 它需要明确定义：

//= require jquery-ui/ui/widgets/menu
//= require jquery-ui/ui/keycode
//= require jquery-ui/ui/position
//= require jquery-ui/ui/version

结果如下：

//= require jquery
//= require jquery-ui/ui/widget
//= require jquery-ui/ui/widgets/menu
//= require jquery-ui/ui/keycode
//= require jquery-ui/ui/position
//= require jquery-ui/ui/version
//= require jquery-ui/ui/widgets/datepicker
//= require jquery-ui/ui/widgets/autocomplete
//= require jquery-ui/ui/widgets/tabs

【讨论】：