javascript - Jquery UI 自动完成相同字段的不同渲染项目结果

Question

我有如下 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")

Answer 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 );
        };

});