5

使用 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），但这似乎也是不可阻挡的。

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

4

3 回答 3

4

这个怎么样。在 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)');
        };
    });
于 2013-04-19T20:22:59.817 回答
1

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

于 2013-04-19T20:00:59.093 回答
0

这是一个老问题，但没有一个给出的答案对我有用。

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

$('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)');
        };
    });
于 2017-04-11T15:04:48.913 回答