jQuery自動完成和復制的輸入字段

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示例。