Jquery Autocomplete renderItem is not working v. 1.12.1

Question

I'am having a problem with JQuery Autocompete renderItem. My Autocomplete works fine but it seems that .data("ui-autocomplete")._renderItem is not being called after the data is received. I don't get any errors when I run the script. I tried to console.log("success"); but it doesn't run neither. Am I missing anything? the version on jquery-ui is 1.12.1. Any help would be greatly appreciated!

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


      };

  } );

Well man! Any html you could add? – Derek Nolan Nov 07 '17 at 19:48 — Derek Nolan, Nov 07 '17 at 19:48
@DerekNolan I just added HTML and JSON output. – Luke Nov 08 '17 at 20:01 — Luke, Nov 08 '17 at 20:01

score 1 · Accepted Answer · answered Nov 09 '17 at 09:14

Okay. I can't really test this without php but what I think is happening is the code where you put console.log() isn't firing at all because it's in a separate function. Try moving this code in to the success function of your ajax call. Something similar to what I have done below. Warning... untested code ahead!

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

   }    

})

});

Not working for me. showing error like "Uncaught TypeError: Cannot set properties of undefined (setting '_renderItem')" — Hemil, Sep 26 '22 at 10:11
Hey @Hemil. You'll need to debug that a little further. That's a fairly common error and normally means what it says. Something is undefined. If I was to hazard a guess in this context it's probably because autocomplete isn't loading or there is a different version being used. A little more reading here: https://stackoverflow.com/questions/7479520/javascript-cannot-set-property-of-undefined . Hope you get to the bottom of it! — Derek Nolan, Sep 29 '22 at 15:36

Jquery Autocomplete renderItem is not working v. 1.12.1

1 Answers1