Jquery Autocomplete Select TypeError: ui.item undefined

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

Below is my code for the autocomplete function. I do get the results as needed but when I select an option from it, I get the TypeError: ui.item is undefined error.

<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 have scoured the net but I have come to a point where I find banging my head on the table. Any help is greatly appreciated.

Solution 1:

You should only need to change the one data property:

.data('item.autocomplete')

was deprecated in favour of

.data('ui-autocomplete-item')

As of jQuery UI 1.9 and removed as of jQuery UI 1.10

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

Solution 2:

I had a similar problem, but this was because the jQuery documentation now shows the usage for jQuery UI 1.10 and our website is still using 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);
  };

Solution 3:

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 migration issues with jQuery UI