如何知道 ENTER 是否用于选择 jQueryUI 自动完成建议？答案

【问题标题】：How to know if ENTER was used to select a jQueryUI autocomplete suggestion or not?如何知道 ENTER 是否用于选择 jQueryUI 自动完成建议？
【发布时间】：2013-04-19 19:50:06
【问题描述】：

使用 jQuery 1.7.2 和 jQueryUI 1.8.12，我正在尝试实现具有以下行为的自动完成字段：

如果选择了自动完成建议（使用鼠标或键盘），请调用函数 A
如果没有匹配项（因此没有选择建议）并且按下了 ENTER，则调用函数 B

我遇到的问题是，当我用键盘选择一个建议时，我对 ENTER 的检查也会被触发，这会让我在不应该调用函数 B 时调用它。这是一个简单的例子（也在jsfiddle）：

$('input').autocomplete({
    source: ['foo', 'bar', 'baz' ],
    select: function(event, ui) {
      console.log('suggestion selected');   
    }
}).keydown(function(e) {
    if(e.keyCode == 13) console.log('ENTER (keydown)');
}).keyup(function(e) {
    if(e.keyCode == 13) console.log('ENTER (keyup)');
});

根据控制台，keyup/keydown 处理程序在自动完成选择事件之后触发（这很奇怪），所以我试图阻止它（通过尝试顶部冒泡，阻止默认，或两者）。我还将事件对象的 originalEvent 属性遍历到最顶层的父级（原始的 KeyboardEvent），但这似乎也无法阻止。

有没有人知道我想要完成的简单解决方案，最好避免使用flags 来指示选择事件已被触发？我想避免这种情况，因为这样的标志必须在其他地方清除，这似乎很容易出错。

【问题讨论】：

标签： jquery jquery-ui-autocomplete

【解决方案1】：

这个怎么样。在 keydown 事件注册之前，只需绑定一个 autocomplete.keydown 事件。这保证在您按下按键之前执行。注意事件注册的顺序也很重要。

http://jsfiddle.net/zFPZH/

$('input')
    .autocomplete({
        source: ['foo', 'bar', 'baz' ],
        select: function(event, ui) {
            console.log('suggestion selected');         
        }
    }).bind("keydown.autocomplete", function() {
        if(event.keyCode == 13){ 
            console.log('keydown.autocomplete (keyup)'); 
        };
    }).keydown(function(e) {
        if(e.keyCode == 13){ 
            console.log('ENTER (keydown)');
        };
    }).keyup(function(e) {
        if(e.keyCode == 13){ 
            console.log('ENTER (keyup)');
        };
    });

【讨论】：

看起来很有希望！如果我将它与ui-state-hoveras D. Strout suggested 类的检查结合起来，它应该可以工作。我现在就测试一下。

【解决方案2】：

似乎当建议列表出现并突出显示建议时，它具有类ui-state-hover。在您的keydown 事件中检查 keyCode 时，您还可以检查建议菜单中是否存在具有该类的元素，以查看按下回车时是否确认建议。

【讨论】：

刚刚试过。当我关注建议时，该类就在那里，但是当 keyup/keydown 处理程序触发时，它已经消失了。
我最终将您的建议与 PSCoder 的建议结合起来，并且能够避免诉诸标志。不知道我是否应该对此如此固执，但很高兴知道有办法！ :)

【解决方案3】：

这是一个老问题，但给定的答案都没有为我解决。

我最终得到了这个解决方法：

$('input')
    .autocomplete({
        source: ['foo', 'bar', 'baz' ],
        select: function(event, ui) {
            $(this).data("stopPropagation", true);            // <----- turn off
            console.log('suggestion selected');         
        }
    }).keydown(function(e) {
        if ($(this).data("stopPropagation")) {
            $(this).data("stopPropagation", false);           // <----- turn on
            return;
        }
        if (e.keyCode == 13){ 
            console.log('ENTER (keyup)');
        };
    });

【讨论】：