RAILS 6 - 如何使用 EasyAutocomplete答案

【问题标题】：RAILS 6 - how to use EasyAutocompleteRAILS 6 - 如何使用 EasyAutocomplete
【发布时间】：2023-03-06 20:55:01
【问题描述】：

我在最后几个小时尝试将 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 不是函数

有什么想法吗？

【问题讨论】：

您好，您终于找到解决方案了吗？我也面临同样的问题
@sven 您是否发现以下答案之一解决了问题？

标签： ruby-on-rails ruby-on-rails-6

【解决方案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)});

【讨论】：

【解决方案2】：

我想您不会将jquery 包含在您的application.js 中。您需要明确执行，因为它不会自动包含在 rails 6 应用程序中。

【讨论】：

您的意思是：您需要明确说明，因为它不会自动包含在 rails 6 应用程序中。
就像你添加easy-autocomplete你需要添加jQuery
jQuery 已经到位。我也使用 Bootstrap，Bootstrap 也需要 jQuery。 Bootstrap 工作正常。所以我认为这个问题与 jQuery 无关。

【解决方案3】：

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

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

(function($) {

//Eac plugin code

})(jQuery);

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

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

【讨论】：

【解决方案4】：

将 script-loader 添加到 package.json 然后添加

import 'script-loader!jquery/dist/jquery.min'

在 app/javascripts/application.js 中

在您的浏览器中检查 $().jquery 是否产生了正确的结果。

【讨论】：