从JQueryUI自动完成组合框中获取所选值

Question

我试图从 jqueryui自动完成组合框 中获取选定值。

这里是演示。

我已经添加了下面的代码来获取选定的值，但它没有起作用。

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

我该怎么解决这个问题？

- Bishan

Answer 1

这是解决你问题的有效代码示例： 代码示例

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

只需访问ui中项目的value变量，您将获得所选选项所需的值。在您的代码中只需要进行小改动，问题就解决了。

- Aditya

---

ui.item.value 是 `<option value="x">' 和 '</option>' 之间的文本，ui.item.option.value 是实际值。 - user1850421

Answer 2

首先，在“正常”的自动完成中，您可以通过执行ui.item.value来获取所选项目的值。 在您的情况下，这种方法不起作用。可能是因为选择函数被覆盖了。

相反，在您的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), 然后打开控制台即可查看其它选项。总的来说，你甚至不需要再调用自动完成小部件了。 更新后的代码

- SirDerpington

---

如果您获取的是选项值而不是文本，可以通过 ui.item.option.value 获取文本。 - Tarık Özgün Güner

Answer 3

首先设置文本框的ID，然后获取该文本框的值并将其与下拉列表选项的文本进行匹配，如果选项的文本匹配，则获取其值。您可以在jsfiddle中查看示例here。

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

- bhargav3vedi