ruby-on-rails - RAILS 6 - 如何使用 EasyAutocomplete
问题描述
我在最后几个小时尝试将 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 is not a function
任何想法 ?
解决方案
我有同样的问题。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)});