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

Question

Currently have a form for internal order creation.

Part number fields are created by looping this

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

jQuery Autocomplete is used to display a list of the descriptions, but enter the part number in the box

<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>

Issue: Only the first instance of the field is displaying entries. All others are displaying similar dropdowns but without the text description and do not allow selecting of parts.

I'm sure the answer is simple, but I cannot figure out what I am doing wrong!

Answer 1

You would have to override the widget factory method first. Try this,

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

      options: {
         renderItem: null,
      },

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

   });

and then initialize your autocomplete like this,

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

Here's a JSBin as an example.