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

Question

使用 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表明 select 事件已被触发？我想避免这种情况，因为这样的标志必须在其他地方清除，这似乎很容易出错。

Answer 1

这个怎么样。在注册keydown事件之前，只需绑定(bind)一个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)');
        };
    });