Автозаполнение JQuery работает только для первого ввода

Question

Я пытаюсь получить три ввода, которые отображают список жилья, которые соответствуют поисковому запросу

Мой HTML выглядит так:

<p>
    <input id="lowgradeLogding" class="lodgingCombo"/>
    <input id="lowgradeLogdingId"/>
</p>
<p>
    <input id="midgradeLodging" class="lodgingCombo"/>
    <input id="midgradeLodgingId"/>
</p>
<p>
    <input id="higradeLodging" class="lodgingCombo"/>
    <input id="higradeLodgingId"/>
</p>

И мой javascript -

<script>
    $(".lodgingCombo").autocomplete({
        minLength: 2,
        source: function (request, response) {
            $.ajax({
                url: '/Data/SearchProducts', type: "POST", dataType: "json",
                data: { query: request.term },
                success: function (data) { response(data); }
            });
        },
        focus: function (event, ui) {
            $(this).val(ui.item.ProductName);
            return false;
        },
        select: function (event, ui) {
            $(this).val(ui.item.ProductName);                
            return false;
        }
    })
    .data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a><div>" + item.ProductName + "<br>" + item.EstablishmentName + "</div></a>")
            .appendTo(ul);
    };
</script>

Раскрывающийся список автозаполнения появляется только на первом входе (lowgradeLodging).На остальных он отображает небольшой артефакт, похожий на пустой выпадающий список.

Как заставить все три ввода работать с автозаполнением?

Answer 1

Селектор $('.lodgingCombo') возвращает коллекцию, и вы запускаете autocomplete только для первого элемента.Вам нужно использовать each, чтобы запустить его для каждого элемента, возвращаемого селектором

$(".lodgingCombo").each(function() { 
  $(this).autocomplete({
    ...
  });
});