0

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

田野：

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

谢谢

4

2 回答 2

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

于 2012-04-20T18:55:42.773 回答
0

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

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

....

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

于 2016-08-14T09:18:55.947 回答