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 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.

Answer 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