多个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()); 
}); 

顺便指出bind()，delegate()和live()自从jQuery 1.7以来已被on()取代，因此您可能想使用它来注册您的处理程序：

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

如果您自动完成的元素都有一个共同的非动态的祖先，你也可以申请on()该元素，而不是document以获得一些性能。