Получить выбранное значение из jqueryui autocomplete combobox

Question

Я пытаюсь получить выбранное значение от jqueryui autocomplete combobox.

Здесь Demo.

Я добавил код ниже, чтобы получить выбранное значение. но это не сработало.

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

Как это решить?

Answer 1

Прежде всего, в «нормальном» автозаполнении вы получите значение выбранного элемента, выполнив ui.item.value. В вашем случае это не работает. Возможно, потому, что функция select становится переопределенной.

Вместо этого сообщите о значении в функции autoCompleteSelect.

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

Если вам интересно, что другие варианты вы могли бы получить в этой функции просто сделать console.log(ui) в нем и откройте консоль, чтобы увидеть другие варианты. В общем, вам даже не нужно больше называть виджет автозаполнения.

Updated fiddle

Answer 2

Вот рабочая скрипку для решения вашей проблемы: Working Fiddle

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

Просто доступ к переменной значение пункта в пользовательском интерфейсе, вы получите требуемое значение выбранного option.Just небольшое изменение требуется в вашем коде и его исправлено.

Answer 3

Сначала задайте идентификатор текстового поля, а затем получите значение этого текстового поля и сопоставьте его с текстом опции выпадающего списка, если текст текста совпадает, затем получите его значение. Вы можете видеть пример here в 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") 
    })