Jquery 자동 완성 renderItem이 작동하지 않습니다. v. 1.12.1

Question

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


     }; 

    }); 

Answer 1

좋아요. 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); 

    }  

}) 

});