Question

目前有一个内部订单创建表单。

通过循环此

创建零件号字段

<input name="part[]" type="text" value="" class="pn-autocomplete" />

jQuery Autocomplete用于显示描述列表，但在框中输入部件号

<script>
$(function() {
    $( ".pn-autocomplete" ).autocomplete({
        source: "pn-json-2.php",
        minLength: 2,
        focus: function( event, ui ) {
            $(this).val( ui.item.pn );
            return false;
        },
        select: function( event, ui ) {
            $(this).val( ui.item.pn );
            return false;
        }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
        return $( "<li>" )
            .append( "<a>" + item.desc + "</a>" )
            .appendTo( ul );
    };
});
</script>

问题： 只有该字段的第一个实例显示条目。所有其他人都显示类似的下拉菜单但没有文字说明，不允许选择部分。

我确定答案很简单，但我无法弄清楚我做错了什么！

Answer 1

您必须首先覆盖小部件工厂方法。试试这个，

$.widget( "ui.autocomplete", $.ui.autocomplete, {

      options: {
         renderItem: null,
      },

      _renderItem: function( ul, item ) {
            return $( "<li>" )
            .append( "<a>" + item.desc + "</a>" )
            .appendTo( ul );
      },

   });

然后像这样初始化你的自动完成，

$(function() {
    $( ".pn-autocomplete" ).autocomplete({
        source: "pn-json-2.php",
        minLength: 2,
        focus: function( event, ui ) {
            $(this).val( ui.item.pn );
            return false;
        },
        select: function( event, ui ) {
            $(this).val( ui.item.pn );
            return false;
        }
    });
});

这里以JSBin为例。

jQuery自动完成和复制的输入字段

1 个答案: