Jquery 自动完成 renderItem 在 1.12.1 版中不起作用

Jquery Autocomplete renderItem is not working v. 1.12.1

我在使用 JQuery Autocompete renderItem 时遇到问题。我的自动完成工作正常,但似乎 .data("ui-autocomplete")._renderItem 在收到数据后没有被调用。当我 运行 脚本时,我没有收到任何错误。我尝试 console.log("success"); 但它也没有 运行。我错过了什么吗? jquery-ui 上的版本是 1.12.1。任何帮助将不胜感激!

html:

<td class="itemCodeHd"><input class="itemCode" name="ItemCode[]" <?php echo "value='$ItemCode'"?> <?php echo "id= ItemCodeItem" . $l;?> ></td>
<td class="itemDescriptionSalesHd"><textarea class="itemDescriptionSales"  name="ItemDescriptionSales[]"  <?php echo "id= ItemDescriptionSalesItem" . $l;?> rows="1"  tabindex="2"><?php echo "$ItemDescriptionSales"?></textarea></td>

JSON:

[{"itemCode":"001","itemDescriptionSales":"Item 1"},
{"itemCode":"002","itemDescriptionSales":"Item 2"},
{"itemCode":"003","itemDescriptionSales":"Item 1"}]

Jquery:

$( function() {


 $( ".itemCode" ).autocomplete({
  source: function( request, response ) {
    $.ajax( {
      url: "item-search.php",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function( data ) {
        response( data );
      }
    } );
 },
 minLength: 3,
  select: function( event, ui ) {
      $(this).parent().siblings().children(".itemDescriptionSales").val(ui.item.itemDescriptionSales);

   }    

}).data("ui-autocomplete")._renderItem = function (ul, item) {
   console.log("success");
          return $('<li>')
          .data( "ui-autocomplete-item", item )
          .append( "<a>" + item.itemCode + "<br>" + item.itemDescriptionSales + "</a>" )
          .appendTo( ul );


      };

  } );

好的。没有 php 我无法真正测试它,但我认为正在发生的是你放置 console.log() 的代码根本没有触发,因为它在一个单独的函数中。尝试将此代码移动到 ajax 调用的成功函数中。类似于我在下面所做的事情。警告...前方未经测试的代码!

$( function() {


 $( ".itemCode" ).autocomplete({
  source: function( request, response ) {
    $.ajax( {
      url: "item-search.php",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function( data ) {
        response( data ).data("ui-autocomplete")._renderItem = function (ul, item) {
            console.log("success");
            return $('<li>')
            .data( "ui-autocomplete-item", item )
            .append( "<a>" + item.itemCode + "<br>" + item.itemDescriptionSales + "</a>" )
            .appendTo( ul );
      };
      }
    } );
 },
 minLength: 3,
  select: function( event, ui ) {
      $(this).parent().siblings().children(".itemDescriptionSales").val(ui.item.itemDescriptionSales);

   }    

})

});