jquery - 从 jqueryui 自动完成组合框中获取选定的值

Question

我正在尝试从jqueryui 自动完成组合框中获取选定的值。

这是演示。

我添加了下面的代码来获取选定的值。但它不起作用。

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

我该如何解决这个问题？

Answer 1

这是解决您的问题的工作小提琴： 工作小提琴

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

只需在 ui 中访问 item 的 value 变量，您将获得所选选项所需的值。只需在您的代码中进行一些小改动并对其进行修复。

Answer 2

首先，在“正常”自动完成中，您将通过执行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 3

首先设置文本框的ID，然后获取该文本框的值并将其与下拉选项的文本匹配，如果选项的文本匹配则获取其值。您可以在 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")
     })