Autocomplete Combobox failed to select option

Question

I want to use jqueryui autocomplete combobox function to let user choose an option from the list.

I followed this example, and here is my code in jsfiddle.

And I get this error when I click the option from the list :

Uncaught TypeError: Cannot read property 'option' of undefined.

The error pointed to the line as below :

select: function(event, ui) {
     ui.item.option.selected = true;               <-- This Line
     self._trigger("selected", event, {
     item: ui.item.option
  })
},

What is the problem with the option?

Edit 2 :

Seems like the ui.item is not assigned to any value, because when I want to display the ui.item to console, it returns undefined instead of object.

But, how can I fix this?

Answer 1

Seems like the problem is the jqueryui version. In version 1.10.x, data no longer stored in item.autocomplete, but ui-autocomplete-item.

It's should be :

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

And not

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

You can refer to here.

Answer 2

Try value instead of option if your code mentioned is in autocomplete

i.item.value this will give you selected string type value from your combo

For example I want to get the value of selected email from my combo (#emailstext)

$('#emailstext').autocomplete({
    source: dat,
    minLenght: 1,
    autocomplete: true,
    select: function (e, i) {
        dowhateverwithemail(i.item.value); //this will pass selected value from combo to function
    }
});