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

时间:2016-11-01 22:15:33

标签: javascript jquery jquery-ui autocomplete

我有如下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`s而不是像

这样的类时遇到了问题
  

$( “#start_zip”, “end_zip”)

1 个答案:

答案 0 :(得分:2)

如果我是你,我会这样使用它:

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

});