Как я могу выбрать вариант в выбранном.JS множественный выпадающий список с клавишей tab?

Ладно,

Я пробовал много разных вещей, но я не могу понять, как получить клавишу tab, чтобы выбрать выбранный вариант после ввода в поиске. Клавиша enter работает просто отлично.

Я бы показал, что я пробовал, но я честно не знаю, с чего начать.

Вот пример кода: 

<html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
    <script type='text/javascript' src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="http://harvesthq.github.io/chosen/chosen.css">

</head>
<body>
<select id="chosen_example" style="width: 200px;" multiple="multiple">
    <option value="1">A English Test A</option>
    <option value="1">B German Test B</option>
    <option value="1">C Greek Test C</option>
</select>
<script>
    $(document).ready(function () {
        var chosen_control = $('#chosen_example');
        chosen_control.chosen().keydown(function (e, obj) {
            //it's not getting in here
            console.log('key pressed');
            if (e.which == 9) {
                console.log('tab key pressed');
                //not sure what to do at this point
            }
        });
    });

</script>
</body>
</html>

Я пробовал .chosen().bind(...). Я пробовал $('#chosen_example').bind(...) и еще кое-что

ВотJS Fiddle , которая идет вместе с ним.

Любая помощь или направление было бы очень ценно, или если вам нужна дополнительная информация, пожалуйста, прокомментируйте.

Edit-Solution

Основываясь на полученных ответах, один из Wondercricket привел меня в правильном направлении.

Изменив файл core js choosen.jquery.js, я добавил под case 9 следующее: 

if (this.results_showing) {
    this.result_select(evt);
}
this.mouse_on_container = false;
break;

Я добавил Это и к Chosen.prototype.keydown_checker, и к AbstractChosen.prototype.keyup_checker

2 3
jquery jquery-chosen

2 ответа:

Это довольно интересная вещь, так как она работает для одиночного выбора выбранных, но она не работает для множественного выбора выбранных.

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

После погружения в файл chosen.js на моей локальной машине я увидел, что уже есть написанная функциональность для обработки функций keydown, в соответствии со следующим: 

Chosen.prototype.keydown_checker = function (evt) {
        var stroke, _ref1;
        stroke = (_ref1 = evt.which) != null ? _ref1 : evt.keyCode;
        this.search_field_scale();
        if (stroke !== 8 && this.pending_backstroke) {
            this.clear_backstroke();
        }
        switch (stroke) {
            case 8:
                this.backstroke_length = this.search_field.val().length;
                break;
            case 9:
                if (this.results_showing && !this.is_multiple) {
                   this.result_select(evt);
                }
                this.mouse_on_container = false;
                break;
            case 13:
                if (this.results_showing) {
                    evt.preventDefault();
                }
                break;
            case 32:
                if (this.disable_search) {
                    evt.preventDefault();
                }
                break;
            case 38:
                evt.preventDefault();
                this.keyup_arrow();
                break;
            case 40:
                evt.preventDefault();
                this.keydown_arrow();
                break;
        }
    };

Поскольку клавиша tab равна 9, существует уже написана функциональность, чтобы справиться с этим; однако там написана логика, которая мешает вам делать то, что вы хотите.

Если вы хотите иметь возможность выбрать опцию с помощью клавиши tab при использовании функции множественного выбора, удалите условие !this.is_multiple в операторе if.

case 9:
    if (this.results_showing) {
           this.result_select(evt);
     }
     this.mouse_on_container = false;
     break;
2

Ответ И Демо

Нет простого способа сделать это, но я заставил его работать , я обновил ваш JSFiddle чтобы продемонстрировать эффект.

HTML 

<select id="chosen_example" style="width: 200px;" multiple="multiple">
    <option value="1">A English Test A</option>
    <option value="1">B German Test B</option>
    <option value="1">C Greek Test C</option>
</select>

То же, что и ваша начальная разметка:) 

##JavaScript##

var selector = "#chosen_example";
var chosen_control = $(selector);
chosen_control.chosen();
var chosen_element = $(selector + "_chosen");
var chosen_input = chosen_element.find("input");
chosen_input.keydown(function (e) {
    if (e.which == 9) {
        e.preventDefault();
        var chosen_option = chosen_element.find("div > ul > li");
        var chosen_index = chosen_option.attr( "data-option-array-index" );
        var index = parseInt( chosen_index ) + 1;
        var chosen_control_option = chosen_control.find("option:nth-child(" + index + ")");
        chosen_control_option.prop( "selected" , true );
        chosen_control.trigger('chosen:updated');
    }
});
Вот где происходит волшебство.

Объяснение

Переменные

  • селектор : селектор вашего контроллера (предпочтительно id, не тестировался ни с чем else)
  • chosen_control : JQuery object содержащий ваш выбор.
  • chosen_element : JQuery object содержащий контейнер плагина div.
  • chosen_input : JQuery object содержит плагин input. (Где вы на самом деле печатаете)
  • chosen_option : JQuery object содержит текущую опцию, отображаемую в контейнере плагина div.
  • chosen_index : string содержащий индекс указанного варианта в соответствии с data-option-array-index. Держать в имейте в виду, что этот индекс начинается с 0, а индекс опциона-с 1.
  • index : индекс опциона, эквивалентный выбранному индексу + 1.
  • chosen_control_option : фактическая опция в элементе select с указанным индексом.

Развитие

Итак, вот как я это сделал, как я уже сказал, это не просто / красиво, но это работает:

  • Во-первых, мы получаем ваш select или chosen_control
  • затем мы выполняем плагин и получаем контейнер div, или chosen_element
  • затем мы получаем chosen_input и привязываем к нему keydown event.
  • event определит, была ли нажата tab, и он выполнит ряд грязных вычислений, чтобы выбрать опцию, которую должна показывать вкладка, и он ее выберет.
  • Мы выполняем команду триггера для выбранного элемента, чтобы обновить себя.

Примечание

Я только что выяснил, что код не работает, если есть несколько вариантов, которые начинаются с одной и той же буквы, он будет просто выбери первый, я его починю, но не сейчас, здесь Новый год!

Увидимся, пока :)

1