ruby-on-rails - RAILS 6 - 如何使用 EasyAutocomplete

Question

我尝试在最后几个小时将 EasyAutocomplete 集成到 RAILS 6 中。但没那么容易。

我做了什么 :

使用 yarn 安装 Javascript 包:

# yarn add easy-autocomplete

将此添加到文件 app/javascript/packs/application.js 中

import “easy-autocomplete”

将此添加到文件 app/assets/stylesheets/application.css 中

*= require easy-autocomplete
*= require easy-autocomplete.themes

然后启动 Rails 服务器并刷新网页。
然后尝试使用它。进入开发者控制台并输入:

var options = {
data: ["otto", "hans", "paula"] 
};

$("#task_name_search_field").easyAutocomplete(options);

task_name_search_field 之前定义为 id :

<input type="search" class="form-control" id="task_name_search_field">

我收到了这条消息:
TypeError: $(...).EasyAutocomplete 不是函数

任何的想法 ？

Answer 1

我有同样的问题。 Turbolinks 不提供对脚本的访问，代码需要在加载后运行，如下所示:

document.addEventListener("turbolinks:load", function() {
  var options = {
   data: ["otto", "hans", "paula"] 
  };

  $("#task_name_search_field").easyAutocomplete(options);
});

为了使自动完成工作，您需要像这样向 application.js 添加一个脚本文件:

require("packs/youfile")

如果它对您有帮助，这是我的代码示例:

document.addEventListener("turbolinks:load", function() {
 $input = $("[data-behavior='autocomplete']")

 var options = {
  getValue: "full_name",
  url: function(phrase) {
  return "/search.json?q=" + phrase;
 },
categories: [
  {
    listLocation: "cameras",
    header: "<strong>Cameras</strong>",
  }
],
list: {
  onChooseEvent: function() {
    var url = $input.getSelectedItemData().url
    $input.val("")
    Turbolinks.visit(url)
  }
 }
}
$input.easyAutocomplete(options)});