2012-04-20 107 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,当加载页面 - 只是给他们一个类和动态绑定到你的