Get selected value from jqueryui autocomplete combobox

Question

I am trying to get the selected value from jqueryui autocomplete combobox .

Here is the Demo .

I added the code below to get the selected value. but it does not work.

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

How can i solve this?

Answer 1

First of all, in “normal” autocomplete, you will get the value of the selected item by executing ui.item.value . In your case, this does not work. Perhaps because the select function becomes overridden.

Instead, report 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 interested in what other parameters you could get in this function, just execute console.log(ui) in it and open the console to see other parameters. In general, you don’t even need to call the autocomplete widget anymore.

Updated script

Answer 2

Here is a working fiddle to solve your problem: Working fiddle

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

Just enter the element value variable in ui, you will get the required value of the selected parameter. It just takes a little change in your code and fix it.

Answer 3

First, specify the identifier of the text field, and then get the value of this text field and match it with the option text of the drop-down list if the option text matches its value. you can see an example here in jsfiddle

 this.input = $("<input>") .appendTo(this.wrapper) .val(value) .attr('placeholder', "Enter Type...") .attr("title", "") // Set Id of Input Type Text .attr('id', 'Mach') .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minLength: 0, source: $.proxy(this, "_source") })