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

JQuery自动完成仅适用于第一个输入

1 个答案: