jQuery Autocomplete，如何绑定到两个输入字段？答案

【问题标题】：jQuery Autocomplete, how to bind to two input fields?jQuery Autocomplete，如何绑定到两个输入字段？
【发布时间】：2012-04-20 18:50:05
【问题描述】：

我想将相同的自动完成绑定到两个输入字段。

字段：

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

然后是我在 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 仅适用于第一个输入字段。第二个完全被忽略。任何想法为什么以及如何使自动完成功能对两个输入字段都完全有效？

谢谢

【问题讨论】：

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

问题在于.data 为匹配元素中的 first 元素检索数据（根据文档）。

您需要遍历应用自动完成小部件的每个项目并应用您的自定义呈现代码：

$("#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

【讨论】：

太棒了！太感谢了。我不认为我会很容易地弄清楚这一点。

【解决方案2】：

您可以在每次单击输入时将自动完成绑定到输入：

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

....

因此，不要在加载页面时尝试绑定到一堆 id - 只需给它们一个类并动态绑定到你“关注”的那个

【讨论】：