2012-04-20 106 views
0

我想將相同的自動完成綁定到兩個輸入字段。jQuery自動完成,如何綁定到兩個輸入字段?

字段:

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

然後我autocompleter jQuery中:

$("#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只適用於第一個輸入字段。第二個完全被忽略。任何想法爲什麼以及如何使自動完成適用於兩個輸入字段?

由於

回答

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

+0

「集中」的一個是太棒了!非常感謝。我認爲我不會輕易想到這一點。 – AnApprentice 2012-04-20 19:45:50

0

每次單擊它時,都可以將自動完成綁定到輸入上:

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

.... 

因此,而不是試圖綁定到一堆的id,當加載頁面 - 只是給他們一個類和動態綁定到你的