Question

我正在使用此http://jqueryui.com/autocomplete/#remote-jsonp进行自动填充输入但是，当我想像这样制作3x输入时，我只能用第一个输入。是否有人在那里解释我的问题是什么只适用于第一次输入，第二次，第三次...是不起作用，以及如何使其工作？我刚刚复制了3次，没有结果......

<div class="ui-widget">
  <label for="city">Your city: </label>
  <input id="city">
  Powered by <a href="http://geonames.org">geonames.org</a>
</div>

提前谢谢！

Answer 1

那是因为你有3个具有相同id（city）的元素，请确保更改ID，并使用类选择器来选择3个元素：

<div class="ui-widget">
    <label for="city1">Your city: </label>
    <input id="city1" class="city">
    Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget">
    <label for="city2">Your city: </label>
    <input id="city2" class="city">
    Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget">
    <label for="city3">Your city: </label>
    <input id="city3" class="city">
    Powered by <a href="http://geonames.org">geonames.org</a>
</div>

然后更改选择器：

$( ".city" ).autocomplete({ ..... });

Answer 2

不要使用Id！使用类选择器。当您处理多个元素时，使用类选择器可以使生活更轻松。为所有输入元素添加一个公共类，如city，然后您的脚本必须如下所示。

$('.city').autocomplete();

有人在那里解释我的问题是什么只适用于第一次输入，第二次，第三次......

原因很简单。当你尝试通过它的id访问一个元素时，Jquery将从DOM的顶部开始查看，所以它找到的第一个元素会停止搜索并返回它（这是因为Id的意思是独特的）。但是按类名选择并非如此。 Jquery返回整个DOM中给定类的所有元素。

使用jQuery自动完成城市

2 个答案: