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代替类，如

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