使用 EasyAutocomplete 的多个输入字段 - Rails答案

【问题标题】：Multiple input field with EasyAutocomplete - Rails使用 EasyAutocomplete 的多个输入字段 - Rails
【发布时间】：2017-06-27 05:29:32
【问题描述】：

我正在使用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，如果我使用两次，则行为不正确，只有一个输入有效。

我真的需要一个人来解决这个问题，一定很简单，但我做不到。

【问题讨论】：

当您尝试使用两个时，您可以详细说明“行为不正确”。
只有一个输入字段有效
那么你的意思是只有一个输入显示了自动完成下拉菜单？哪一个？
@vijoc autocomplete-lang。 console.log 显示 undefined 但如果我评论 $input_ide.easyAutocomplete(options_ide); 显示正确的 id

标签： javascript jquery html ruby-on-rails ruby

【解决方案1】：

我遇到了同样的问题，并通过向每个文本字段添加唯一的“id”来解决它。

【讨论】：

【解决方案2】：

在 JavaScript 中，而不是写：

getValue: "name"

你可以写类似的东西：

getValue: function (element) {
    return element.lang+ element.ide
}

你可以关注这个github link的讨论。

【讨论】：