JQuery autocomplete Select TypeError: ui.item undefined

Question

I am using jquery ui 1.10.3 and jquery 2.0.3. I am trying to use the autocomplete function to change the text of another text field when I select an option from the suggested options from autocomplete.

Below is my code for the autocomplete function. I get the results as needed, but when I select a parameter from it, I get a TypeError: ui.item undefined message.

<script language="javascript"> $(document).ready(function(){ $('#item_code').autocomplete({ source: "http://localhost/test/item/search_item", minLength: 1, select: function( event, ui ) { $( "#item_description" ).val(ui.item.description ); return false; } }).data("ui-autocomplete" )._renderItemData = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.value + " - " + item.description + "</a>" ) .appendTo( ul ); }; }); </script> 

I am combing the net, but I came to the moment when I found myself hitting my head on the table. Any help is appreciated.

Answer 1

You only need to change one data property:

 .data('item.autocomplete') 

deprecated in favor

 .data('ui-autocomplete-item') 

Beginning with jQuery UI 1.9 and removed with jQuery UI 1.10

http://jqueryui.com/upgrade-guide/1.10/#removed-item-autocomplete-data-use-ui-autocomplete-item

Answer 2

Turns out I had to change

 data("ui-autocomplete" )._renderItemData = function( ul, item ) { 

and

 .data( "item.autocomplete", item ) 

to

 data("ui-autocomplete" )._renderItem = function( ul, item ) { 

and

 .data( "item.autocomplete-item", item ) 

hope this helps anyone who has problems migrating using jQuery UI

Answer 3

I had a similar problem, but this was due to the fact that the jQuery documentation now shows usage for jQuery UI 1.10, and our site still uses jQuery UI 1.8.20.

This is what worked for me in the end.

  .data("autocomplete")._renderItem = function (ul, item) { return $("<li>") .data("item.autocomplete", item) .append("<a>" + item.label + "<br><b>" + item.category + "</b></a>").appendTo(ul); };