如何知道是否使用回车键选择了jQueryUI自动完成建议？

Question

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

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

我遇到的问题是，当我使用键盘选择建议时，我的回车检查也会触发，这会在不应该调用函数B时使我调用函数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来指示已触发选择事件？我想避免这种情况，因为这样的标志必须在其他地方清除，这似乎容易出错。

- bfavaretto

Answer 1

试试这个。在按键事件注册之前，先绑定一个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)');
        };
    });

- PSL

---

看起来很有前途！如果我将其与检查类ui-state-hover（正如D. Strout建议的那样）相结合，它应该可以工作。我现在会进行测试。 - bfavaretto

Answer 2

似乎当建议列表出现并且一个建议被选中时，它会有类名为ui-state-hover的属性。在检查keydown事件中的keyCode时，您还可以检查建议菜单中是否存在具有该类的元素，以确定在按下enter键时是否要确认建议。

- Ashley Strout

---

刚试过了。当我选中建议时，类是存在的，但当 keyup/keydown 处理程序触发时，它已经消失了。 - bfavaretto

我最终将您的建议与PSCoder的建议结合起来，成功避免了使用标志。不确定我是否应该如此固执，但知道有一种方法是很好的！ :) - bfavaretto

Answer 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)');
        };
    });

- mirko