Get selected value from jqueryui autocomplete combobox

Question

I'm trying to get selected value from jqueryui autocomplete combobox.

Here is the Demo.

I have added below code to get selected value. but it is not worked.

$( "#combobox" ).autocomplete({
   select: function(event, ui) { 
       alert($(ui).val());
   }
});

How can I solve this?

Solution 1

First of all in a "normal" autocomplete you would get the value of the selected item by doing ui.item.value. In your case this doesn't work. Perhaps because the select function gets overridden.

Instead alert the value in your autoCompleteSelect function.

this._on(this.input, {
    autocompleteselect: function (event, ui) {
        /* THIS IS NEW */
        alert(ui.item.value);
        ui.item.option.selected = true;
        this._trigger("select", event, {
            item: ui.item.option
        });
}

If you are curious what other options you could get in this function just do a console.log(ui) in it and open your console to see other options. All in all you don't even need to call the autocomplete widget anymore.

Updated fiddle

Solution 2

Here is the working fiddle for the solution to your problem: Working Fiddle

 $( "#combobox" ).combobox({
      select: function( event, ui ) {
      alert(ui.item.value);
      }
      });

Just access the value variable of item in ui, you will get the required value of selected option.Just a small change is required in your code and its fixed.