jQueryオートコンプリート、2つの入力フィールドにバインドする方法は？

Question

2つの入力フィールドに同じオートコンプリートをバインドしたいと思います。

分野：jQueryので

<input id="rwF1" maxlength="250" type="text" value=""> 
<input id="rwF2" maxlength="250" type="text" value=""> 

その後、私の自動入力補完：

$("#rwF1, #rwF2").autocomplete({ 
     source: availableTags 
    }).data("autocomplete")._renderItem = function(ul, item) { 
     return $('<li class="roomWizardLI"></li>') 
     .data("item.autocomplete", item) 
     .append("<a><span class='title'>" + item.value + "</span><span class='Count'>" + "2" + " members</span></a>") 
     .appendTo(ul); 
    }; 

これは結合して、オートコンプリートメニューは両方の入力に表示されますが。カスタムのrenderItemは最初の入力フィールドにのみ適用されます。 2番目は完全に無視されます。どのようなアイデアと、オートコンプリートを両方の入力フィールドで完全に動作させるのか？

おかげ

Answer 1

問題は.dataが（マニュアルに従って）マッチした要素で最初要素のデータを取得することです。あなたはオートコンプリートウィジェットが適用されたことを各項目を反復し、カスタムレンダリングコードを適用する必要があります

：

$("#rwF1, #rwF2").autocomplete({ 
    source: availableTags 
}).each(function() { 
    $(this).data("uiAutocomplete")._renderItem = function(ul, item) { 
     return $('<li class="roomWizardLI"></li>') 
      .data("item.autocomplete", item) 
      .append("<a><span class='title'>" + item.value + "</span><span class='Count'>" + "2" + " members</span></a>") 
      .appendTo(ul); 
    }; 
}); 

例：http://jsfiddle.net/kcSfw/

編集：jqueryの1.12.0を使用してuiAutocompleteを使用する必要があります

Answer 2

オートコンプリートをクリックするたびに入力にバインドできます：

$(document).on("focus",".class_of_autocomplete_inputs",function(e) { 
    if (!$(this).data("autocomplete")) { 
$(".class_of_autocomplete_inputs").autocomplete({ 

.... 

ので、代わりのページをロードする際に、IDSの束にバインドしようとしている - ちょうどそれらにクラスを提供し、動的に幻想的であるあなたが