一页上的多个Jquery ui自动完成

Question

我正在使用jQuery UI Autocomplete。我在三个不同的输入上使用它。所以我有：

输入 ID 1
使用 xml 数据自动完成 1

输入 id 2
使用 xml 数据自动完成 2

输入 ID 3
使用 xml 数据自动完成 3

我也有这样的活动：

$(".ui-autocomplete li a").live("click",function(){

    doSearch($(this).text());

});

问题是这个事件发生在所有三个自动完成上。

我必须在事件代码或其他地方进行哪些更改才能将事件绑定到特定的输入/自动完成。所以我想让事件 1、2、3 对应于不同的输入/自动完成集。

Answer 1

如果我正确理解您的问题，除了项目文本之外，您还想将自动完成元素或其索引传递给 doSearch()。

传递自动完成元素就像使用closest()一样简单：

function doSearch(autocomplete, itemText)
{
    // ...
}

$(".ui-autocomplete li a").live("click", function() {
    var $this = $(this);
    doSearch($this.closest(".ui-autocomplete"), $this.text());
});

传递它的索引有点棘手，可以通过index()来实现：

function doSearch(autocompleteIndex, itemText)
{
    // ...
}

$(".ui-autocomplete li a").live("click", function() {
    var $this = $(this);
    doSearch($this.closest(".ui-autocomplete").index(".ui-autocomplete"),
        $this.text());
});

请注意，自 jQuery 1.7 起，bind()、delegate() 和 live() 已被 on() 取代，因此您可能希望使用它来注册您的处理程序：

$(document).on("click", ".ui-autocomplete li a", function() {
    // ...
});

如果您的自动完成元素有一个共同的非动态祖先，您也可以将on() 应用于该元素而不是document 以获得一点性能。