RAILS 6-如何使用EasyAutocomplete

Question

我在最后几个小时尝试将EasyAutocomplete集成到Rails6中，但并不是那么容易。

我做了什么：

使用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 Server并刷新Web页面。然后试着使用它。进入开发者控制台，输入：

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)});

Answer 2

我想您不会在application.js中包含jquery。你需要明确地这样做，因为它不会自动包含在rails 6应用程序中。

Answer 3

我遇到了类似的问题。我是Webpacker的n00b，但在默认情况下，它似乎不会以包含插件的相同顺序进行编译。

为了解决这个问题，我做了这个变通方法，它只是将插件代码包装在一个匿名jQuery函数中，如下所示：

(function($) {

//Eac plugin code

})(jQuery);

https://github.com/pawelczak/EasyAutocomplete/issues/200#issuecomment-212277620

也许在配置中有一种方法可以强制按照正确的顺序进行编译。这看起来很有前途的https://stackoverflow.com/a/43005332/148390