Multiple input field with EasyAutocomplete - Rails

Question

I'm using EasyAutocomplete to select some data.

The problem I'm having is that I only can use one autocomplete input. I tried to find a solution but I didn't find anything in the documentation.

My code:

<%= 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 %>

Controller:

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

So, I only can use once the easyAutocomplete, if I use it twice the behavior is not correct and only one input work.

I really need a hand to solve this, is must be pretty simple, but I can't get it.

You could elaborate on how "the behavior is not correct" when you try to use two. — vijoc
– vijoc, Commented Jun 27, 2017 at 7:27
So what you're saying is that only one of the inputs shows the autocomplete dropdown? Which one? — vijoc
– vijoc, Commented Jun 27, 2017 at 7:31
@vijoc autocomplete-lang. And console.log shows undefined but if I comment $input_ide.easyAutocomplete(options_ide); shows the correct id — exsnake
– exsnake, Commented Jun 27, 2017 at 7:39

alpha · Accepted Answer · 2017-08-04 12:34:10Z

3

I faced the same problem and solved it by adding unique "id"s to each text field.

answered Aug 4, 2017 at 12:34

alpha

312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

twernt · Accepted Answer · 2019-12-10 19:13:25Z

3

In JavaScript, instead of writing:

getValue: "name"

You can write something similar to:

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

You can follow the discussion on this github link.

edited Dec 10, 2019 at 19:13

twernt

20.6k5 gold badges35 silver badges41 bronze badges

answered Dec 10, 2019 at 17:24

ari

312 bronze badges

Collectives™ on Stack Overflow

Multiple input field with EasyAutocomplete - Rails

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related