如何判断是否从 JQuery UI 自动完成中选择了建议答案

【问题标题】：How can you tell if a suggestion was selected from JQuery UI Autocomplete如何判断是否从 JQuery UI 自动完成中选择了建议
【发布时间】：2011-11-22 22:47:47
【问题描述】：

我有一个连接到 JQuery UI 自动完成的文本框。当用户在框中键入时，我的搜索通过 ajax 调用运行并返回建议。似乎会发生三件事：

自动完成建议选项，用户选择其中一个
自动完成功能会建议选项，但用户选择不选择任何选项
自动完成无法提出建议 - 不匹配（因此不显示建议列表）

处理上述所有场景，我如何判断用户是否从自动完成中选择了一个选项？

我已经研究过在搜索开始 (match=false) 并发生选择 (match=true) 时标记一个标志，但这似乎不是一种非常简洁的处理方式。

【问题讨论】：

您是否还需要知道何时没有选择了某个选项？也就是说，当用户输入的值不在建议列表中时？
是的，Andrew，因为当输入数据库中当前不存在的值时，我的页面需要做一些不同的事情。

标签： jquery jquery-ui autocomplete jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

您可以像@bfavaretto 指出的那样使用select 事件，但我认为在这种情况下使用change 事件更方便：

$("#auto").autocomplete({
    source: ['hi', 'bye', 'foo', 'bar'],
    change: function(event, ui) {
        if (ui.item) {
            $("span").text(ui.item.value);
        } else {
            $("span").text("user picked new value");
        }
    }
});

示例： http://jsfiddle.net/andrewwhitaker/3FX2n/

change 在字段模糊时触发，但与原生 change 事件不同，您可以获取有关用户是否单击事件的信息（如果用户未单击建议，ui.item 为空）。

【讨论】：

如果您乐于等待字段模糊再知道项目是否是新的，那么这是一个很好的答案。感谢您的意见，安德鲁。
@Andrew tat 是我一直在寻找的东西，但不是单独问一个问题，如果你能让我知道它可能很棒。如果我想获取用户输入的未从自动完成下拉列表中选择的不同值，我该如何获取？
@Gotham'sReckoning：试试$(this).value()
@AndrewWhitaker 不是把这两个值都放在一起吗？怎么区分？？他们之间？
@Gotham'sReckoning：如果他们选择一个值，ui.item 将不是null。如果到达else 块中的代码，调用$(this).val() 只会得到输入中的值——你知道他们没有选择一个值，因为如果他们有ui.item 就不会为空。这有帮助吗？ jsfiddle.net/0cL1e2ar

【解决方案2】：

当用户选择一个选项时，会触发“选择”事件。你可以听它并设置一个标志。

(function() {
    var optionSelected = false;
    $( ".selector" ).autocomplete({
        select: function(event, ui) { optionSelected = true; }
    });
})();

【讨论】：

谢谢，细胞皮质。所以这基本上是我在问题中概述的标志解决方案。看起来这不是做我想做的事情的一种非常简洁的方式。感谢您澄清这一点。
实际上，这是在 JavaScript 中做事的一种非常精细/普通/优雅的方式。要做的重要事情是将事物包装在一个闭包中。

【解决方案3】：

jQueryUI 提供了一个select event，您应该在自动完成选项中定义它（当您将自动完成应用于表单输入时）。

例如（来自docs）：

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

您可以在事件处理程序内部通过ui.item 访问所选项目。

【讨论】：