在一个页面上多个Jquery ui自动完成

时间:2012-04-01 08:22:27

标签: jquery-ui autocomplete jquery

我正在使用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对应于不同的输入/自动完成集。

1 个答案:

答案 0 :(得分: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());
});

请注意,{j} 1.7之后bind()delegate()live()已被on()取代,因此您可能希望使用它来注册您的处理程序:< / p>

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

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