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表示选择事件被触发了？我想避免这种情况，因为这样的旗帜必须在其他地方被清除，这似乎容易出错。

Answer 1

这个怎么样？在keydown事件注册表之前，只需绑定autocomplete.keydown事件。这保证在你的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)');
        };
    });

Answer 2

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

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

如何知道是否使用ENTER来选择jQueryUI自动完成建议？

3 个答案: