代码之家  ›  专栏  ›  技术社区  ›  Luke

Jquery Autocomplete renderItem在1.12.1版本中不起作用

  •  0
  • Luke  · 技术社区  · 7 年前

    我对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 );
    
    
          };
    
      } );
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Derek Nolan    7 年前

    可以如果没有php,我真的无法测试这一点,但我认为正在发生的是您放置的代码 console.log() 因为它在一个单独的函数中,所以根本没有启动。尝试将此代码移到ajax调用的success函数中。类似于我在下面所做的事情。警告未经测试的代码!

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