JQuery的自动完成只工作了第一个输入 [英] JQuery autocomplete is only working for the first input

问题描述

我想有三个输入的显示进军搜索词住宿名单

I'm trying to have three input that display a list of lodging that march the search term

我的HTML是这样的：

My HTML goes like this:

<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

And my javascript is

<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）。在旁人显示一个小神器，看起来像一个空的下拉列表。

The autocomplete drop down only appears on the first input (lowgradeLodging). On the others it display a small artifact that look like an empty dropdown.

我怎样才能使与自动完成所有三个输入工作？

How can I make all three input work with the autocomplete?

推荐答案

的 $（'。lodgingCombo'）选择返回一个收集和你只运行自动完成的第一个项目。您需要使用每个通过选择返回的每一个元素上运行它。

The $('.lodgingCombo') selector is returning a collection and you're only running autocomplete on the first item. You need to use each to run it on every element returned by the selector

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

这篇关于JQuery的自动完成只工作了第一个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！