我使用EasyAutocomplete选择了一些数据。
我遇到的问题是我只能使用一个自动完成输入。我试图找到一个解决方案,但我在文档中找不到任何内容。
我的代码:
<%= form_tag('/search', local: true, method: :get, class: 'form-group row' ) do %>
<div class="col-md-5">
<%= text_field_tag(:q, nil, data: { behavior: 'autocomplete-lang' }, placeholder: 'Lenguaje', class: 'form-control') %>
</div>
<% end %>
<%= form_tag('/search', local: true, method: :get, class: 'form-group row' ) do %>
<div class="col-md-5">
<%= text_field_tag(:q, nil, data: { behavior: 'autocomplete-ide' }, placeholder: 'Lenguaje', class: 'form-control') %>
</div>
<% end %>
控制器:
def search
@lang = Content.ransack(name_cont: params[:q],types_id_eq: 1).result(distinct: true)
@ide = Content.ransack(name_cont: params[:q],types_id_eq: 4).result(distinct: true)
respond_to do |format|
format.html {}
format.json {
@lang = @lang.limit(5)
@ide = @ide.limit(5)
}
end
end
JS:
document.addEventListener("turbolinks:load", function() {
var $input = $("[data-behavior='autocomplete-lang']");
var options = {
getValue: "name",
url : function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listLocation: "lang"
}
],
list: {
onChooseEvent: function () {
var id = $input.getSelectedItemData().id;
console.log(id);
}
}
};
$input.easyAutocomplete(options);
});
document.addEventListener("turbolinks:load", function() {
var $input_ide = $("[data-behavior='autocomplete-ide']");
//IDE
var options_ide = {
getValue: "name",
url : function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listLocation: "ide"
}
],
list: {
onChooseEvent: function () {
var id = $input_ide.getSelectedItemData().id;
console.log(id);
}
}
};
$input_ide.easyAutocomplete(options_ide);
});
所以,我只能使用一次easyAutocomplete
,如果我使用它两次,行为不正确,只有一个输入工作。
我真的需要一只手来解决这个问题,必须非常简单,但我无法得到它。
答案 0 :(得分:2)
I faced the same problem and solved it by adding unique "id"s to each text field.
答案 1 :(得分:1)
在JavaScript中,而不是编写:
getValue: "name"
您可以写类似的东西:
getValue: function (element) {
return element.lang+ element.ide
}
您可以关注有关此github link的讨论。