Как показать параметры автозаполнения для текстового поля, нажав клавишу со стрелкой вниз с помощью jQuery? - PullRequest
Новая
       48

Как показать параметры автозаполнения для текстового поля, нажав клавишу со стрелкой вниз с помощью jQuery?

0 голосов
/ 21 июня 2020

Я пытаюсь разрешить выбор нескольких параметров с помощью автозаполнения 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', '');
}

Я подозреваю, что мне нужно добавить несколько logi c, чтобы этот logi c не перехватил события стрелки вниз, когда параметры автозаполнения open, но до сих пор ничего из того, что я пробовал с этой целью, не сработало.

1 Ответ

0 голосов
/ 25 июня 2020

Я смог сделать это, добавив пространство имен к событию нажатия клавиши, а затем отключив его после запуска параметров автозаполнения, а затем снова включив его после закрытия параметров автозаполнения. 

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

Это не слишком красиво, но работает.

...