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({
    ...
  });
});