Question

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

字段：

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

由于

Answer 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

Answer 2

每次点击输入时，您都可以将自动完成绑定到输入：

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

....

因此，当您加载页面时，不要试图绑定到一堆ID - 只需给它们一个类并动态绑定到您'专注'的那个

jQuery自动完成，如何绑定到两个输入字段？

2 个答案: