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

Question

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

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

处理上述所有情况，如何判断用户是否从自动填充中选择了一个选项？

我在搜索开始时（match = false）和select（匹配= true）时标记了一个标记，但这似乎不是一种非常简洁的做法。

Answer 1

您可以使用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"); } } }); 事件会更方便：

change

示例： @bfavaretto

当字段模糊时，

change会触发，但与本机ui.item事件不同，您会获得有关用户是否单击某个事件的信息（{{1}}如果用户执行了此操作，则为{null}不要点击建议。）

Answer 2

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

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

Answer 3

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

例如（来自docs）：

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

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