jQuery Select2 - используйте вкладку, чтобы выбрать опцию - PullRequest
Новая
       8

jQuery Select2 - используйте вкладку, чтобы выбрать опцию

0 голосов
/ 30 мая 2018

Я хотел бы иметь возможность использовать клавиши со стрелками, чтобы перейти к желаемой опции select2, а затем нажать клавишу tab, чтобы выбрать эту опцию, а затем перейти к следующему элементу, как обычно.

Я уже получилстрелка вниз, чтобы открыть select2 со следующим: 

$(document).on('keydown', '.select2', function(e) {
  if (e.originalEvent && e.which == 40) {
    e.preventDefault();
    $(this).siblings('select').select2('open');
  } 
});

И я также могу использовать стрелки, чтобы добраться туда, куда мне нужно идти.Сейчас я изо всех сил пытаюсь заставить работать вкладку.

Полагаю, поскольку у select2-search__field есть фокус, когда я нажимаю клавишу, это элемент, с которым я связываю событие?И тогда, по-видимому, мне нужно получить значение выделенной в данный момент опции и вызвать изменение select2?

Я не уверен на 100%, что это правильный подход, но я не могу понять это.

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Просто добавьте следующую строку в ваш код.

$(document).on("select2:close", '.select2-hidden-accessible', function () { $(this).focus(); });

Ваша проблема будет решена.

0 голосов
/ 30 мая 2018

Для этого вы можете использовать selectOnClose: true: 

$(document).on('keydown', '.select2', function(e) {
  if (e.originalEvent && e.which == 40) {
    e.preventDefault();
    $(this).siblings('select').select2('open');
  }
});

$('select').select2({
  selectOnClose: true
});
select {
  min-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<select>
  <option>AAAAA</option>
  <option>BBBB</option>
  <option>CCCC</option>
  <option>DDDD</option>
  <option>EEEE</option>
  <option>FFFF</option>
  <option>GGGG</option>
</select>
...