jquery-ui - jquery ui自动完成输入键添加到列表

Question

我有一个类似于http://jqueryui.com/demos/autocomplete/#multiple的输入框，带有添加按钮。我想添加由逗号分隔的所有值，添加到输入列表中。我无法做到这一点，因为带有 enter 的按键似乎与select自动完成事件发生冲突。问题是用户只能添加一项​​。我希望用户添加多个项目，然后按 Enter 键将它们同时添加到列表中。

仅当自动完成的建议列表关闭时才会发生 enter 键事件。

Answer 1

You can use the open and close events of autocomplete to keep track whether or not the suggestion list is currently open (storing this information somewhere - in the example below, in the "selectVisible" data):

$( "#tags" )
    .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.ENTER && !$(this).data("selectVisible") ) {
            // Your code
        }
        ...
    })
    .autocomplete({
        open: function() {
            $(this).data("selectVisible", true);
        },
        close: function() {
            $(this).data("selectVisible", false);
        },
        ...
    });

Working example at jsFiddle.

Answer 2

我之前使用 jQuery Multiselect 小部件取得了巨大成功，我相信用户可以选择多个选项更直观。

它还开箱即用地适当地处理 Enter 键。

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/