Jquery UI自动完成相同字段的不同渲染项结果答案

【问题标题】：Jquery UI Autocomplete Different Render Item Result for Same fieldsJquery UI自动完成相同字段的不同渲染项结果
【发布时间】：2016-11-01 22:15:32
【问题描述】：

我的 Jquery UI 自动完成设置如下。

 $(".zipcode").autocomplete({
            source:'index.php?someParams',
            minLength: 1,
            autoFocus : true,
            select : function(event, ui)
            { 
                var prefix = Some Prefix Criteria;
                var item = ui.item;
                if(item) {
                    $("#"+prefix+"_zip_id").val(item.id);
                    $("#"+prefix+"_zip").val(item.value);               
                }
            }
        }) 
        .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
              return $( "<li>" ).append( "<a>" + item.label + "<br>" + item.state + "</a>" ).appendTo( ul );
        };

问题是我在页面上有两个使用 zip 自动完成功能的字段。它使用第一个自动完成的 renderItem 更改来呈现，而第二个自动完成的数据 renderItem 不会被触发。

我在使用 ID 代替 Class 时也遇到了问题

$("#start_zip","end_zip")

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

如果我是你，我会这样使用它：

$(".zipcode").each(function (i, el) {
    el = $(el);
    el.autocomplete({
        source:'index.php?someParams',
        minLength: 1,
        autoFocus : true,
        select : function(event, ui)
        { 
            var prefix = Some Prefix Criteria;
            var item = ui.item;
            if(item) {
                $("#"+prefix+"_zip_id").val(item.id);
                $("#"+prefix+"_zip").val(item.value);               
            }
        }
    }) 
        .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li>" ).append( "<a>" + item.label + "<br>" + item.state + "</a>" ).appendTo( ul );
        };

});

【讨论】：