jQuery UI 自动完成：禁用选项卡完成？

发布于 2024-11-16 15:24:17 字数 134 浏览 3 评论 0原文

参考

如何禁用使用 Tab 键来选择当前/突出显示的项目？我只想 Enter 来填充它。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吾家有女初长成 2024-11-23 15:24:17

Ryan 将取消操作放入 按键中的示例 事件对我不起作用，但我们可以将其放在自动完成的 select 选项中：

select: function(e, ui) {
    if(e.keyCode === 9) return false;
    // other code...
}

Ryan's example of putting the cancellation in the keypress event didn't work for me, but we can put it in the select option of autocomplete:

select: function(e, ui) {
    if(e.keyCode === 9) return false;
    // other code...
}

回复收藏 0 原文

梦里泪两行 2024-11-23 15:24:17

当您在 jquery-ui 中使用 .autocomplete() 修饰符时，它将输入文本框的按键处理程序设置为如下。 self.menu.select 将文本框设置为自动完成列表中当前突出显示的值，

.bind( "keydown.autocomplete", function( event ) {
...
switch( event.keyCode ) {
...
case keyCode.TAB:
    if ( !self.menu.active ) {
       return;
    }
    self.menu.select( event );
    break;
...
    }
}

因此您需要做的是确保不会调用此处理程序。我可以通过向按键添加一个处理程序来完成此操作，如果按键是 TAB，则该处理程序会从处理程序返回 false。

$( "#tags" ).autocomplete({
        source: availableTags
    });
$("#tags").keypress(function(e){
    if(e.keyCode == keyCode.TAB) {
        e.stopImmediatePropagation();
    }
});

您可以在此处查看结果。

When you use the .autocomplete() modifier in jquery-ui, it sets the keypress handler for your input textbox to as follows. The self.menu.select sets the text box to the currently highlighted value in the auto-complete list

.bind( "keydown.autocomplete", function( event ) {
...
switch( event.keyCode ) {
...
case keyCode.TAB:
    if ( !self.menu.active ) {
       return;
    }
    self.menu.select( event );
    break;
...
    }
}

So what you need to do is ensure that this handler does not get called. I was able to do this by adding a handler to the keypress that returns false from the handler if the keypress is TAB.

$( "#tags" ).autocomplete({
        source: availableTags
    });
$("#tags").keypress(function(e){
    if(e.keyCode == keyCode.TAB) {
        e.stopImmediatePropagation();
    }
});

You can see the result here.

回复收藏 0 原文