1つのページで複数のJquery UIを自動完成

Question

私はjQuery UI Autocompleteを使用しています。私は3つの異なる入力でそれを使用しています。だから、私は：xmlデータ2

入力番号3
オートコンプリートを使用してXMLデータと

入力番号1
オートコンプリート1

入力番号2
オートコンプリートxmlデータ付き3

私はまた、このようなイベントがあります：

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

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

}); 

問題は、このイベントは、オートコンプリートの3つのすべてに起こることです。

イベントを特定の入力/オートコンプリートにバインドするには、イベントコードなどを変更する必要があります。だから私は、入力/オートコンプリートの異なるセットに対応するイベント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()を用いて達成することができる。そのbind()を通過中

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

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

注、delegate()live()はjQuery 1.7以降でon()に置き換えられていますので、ハンドラを登録するために使用してください。

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

あなたのオートコンプリート要素が共通の非動的祖先を持っている場合は、少しパフォーマンスを得るために代わりdocumentのその要素にon()を適用することができます。