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

Question

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

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

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

我已经研究过在搜索开始（match = false）和选择发生（match = true）时标记一个标志，但这似乎不是一个非常简洁的做事方式。

Answer 1

您可以使用 select 事件，例如 @bfavaretto 指出，但我认为在这种情况下使用更方便更改事件：

$("#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 为 null）。

Answer 2

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

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

Answer 3

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

例如（来自 docs）：

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

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