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.

joshschreuder · Accepted Answer · 2014-03-27 00:37:53Z

15

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

answered Mar 27, 2014 at 0:37

joshschreuder

1,4732 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gunnerz · Accepted Answer · 2014-10-14 09:09:29Z

6

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

answered Oct 14, 2014 at 9:09

gunnerz

1,9265 gold badges25 silver badges40 bronze badges

Comments

Bill Turner · Accepted Answer · 2014-06-23 14:20:45Z

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

edited Jun 23, 2014 at 14:20

Bill Turner

3,6971 gold badge23 silver badges26 bronze badges

answered Sep 19, 2013 at 17:30

Ela Buwa

1,7043 gold badges22 silver badges46 bronze badges

Collectives™ on Stack Overflow

Jquery Autocomplete Select TypeError: ui.item undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related