如何通过使用 jQuery 按下向下箭头键来显示文本区域的自动完成选项？

Question

我正在尝试允许使用应用于文本区域字段的 jQuery 自动完成来选择多个选项。下面的代码工作正常除了向下箭头键不会触发显示自动完成选项，并且可以使用箭头键遍历。当应用于普通输入文本字段（即不是文本区域）时，此功能可以完美运行。

所以我想知道是否有人可以告诉我如何让它在 textarea 上工作？

multiselect: {

    split: function (val) {
        return val.split(/;\s*/);
    },

    myField: {

        myOptions : [],

        extractLast : function(term) {
            return multiselect.split(term).pop();
        },

        autocomplete_options : {
            appendTo : 'body',
            minLength : 0,
            source : function(request, response) {
                response($.ui.autocomplete.filter(multiselect.myField.myOptions, multiselect.myField.extractLast(request.term)))
            },
            focus : function() { return false; },
            select : function(e, ui) {
                var terms = multiselect.split(this.value);
                terms.pop();
                terms.push(ui.item.value);
                terms.push("");
                this.value = terms.join("; ");
                return false;
            },

        },

        multi_options : function(myOptions)
        {
            multiselect.myField.myOptions = myOptions;
            $('[name=myField]').
                autocomplete(multiselect.myField.autocomplete_options)
                .on("keydown", function(event) {
                    // here is where I've added code to handle the down arrow key press
                });
        },

        unbind : function() {
            $('[name=myField]').autocomplete("destroy")
        }
    }
}

我尝试了很多方法来触发自动完成选项。将以下代码添加到 keydown 事件是我能够获得的最接近的代码，即自动完成选项显示，但我无法像文本输入字段那样使用向下箭头遍历它们。但是，向上箭头确实有效。

if (event.keyCode == 40) {
    $(this).autocomplete('search', '');
}

我怀疑我需要添加一些逻辑来防止此逻辑在自动完成选项打开时拦截向下箭头事件，但到目前为止我为此所做的任何尝试都没有奏效。

即

if (event.keyCode == 40 && $('ul-autocomplete').is(':hidden')) {
    $(this).autocomplete('search', '');
}

有人对如何做到这一点有什么建议吗？

Answer 1

我可以通过将命名空间添加到 keydown 事件，然后在触发自动完成选项后将其关闭，然后在自动完成选项关闭后将其重新打开来做到这一点。

handle_key_down : function (event) {
    if (event.keyCode == 40) {
        $(this).autocomplete('search', '');
        $(this).off('keydown.myField');
    }
}

这在我的 multi_options 函数中：

    .on("keydown.myField", multiselect.myField.handle_key_down)
    .on("autocompleteclose", function (event) {
        $(this).on('keydown.myField', multiselect.myField.handle_key_down);
    });

它不是很漂亮，但很管用。

如何通过使用 jQuery 按下向下箭头键来显示文本区域的自动完成选项？

How do I show autocomplete options for a textarea by pressing the down arrow key using jQuery?

jquery

autocomplete

jquery-ui-autocomplete