Как захватить клавишу ввода нажмите для выбора2 - PullRequest
Новая
       4

Как захватить клавишу ввода нажмите для выбора2

2 голосов
/ 07 марта 2019

У меня есть выпадающий список select2 для стран (множественный выбор). Когда пользователь вводит ключевые слова, в меню отображаются связанные элементы.
Например, если пользователь вводит ind , в меню отображаются Индия и Индонезия . Если нажата клавиша ввода, выбирается первый элемент ( Индия ). Это поведение по умолчанию.

Теперь я хотел бы выбрать обе страны, когда пользователь вводит ind и нажимает клавишу ввода. 

$(".select2-search__field").on("keyup",  function (e) { 
    console.log(e.keyCode);       
    if (e.keyCode == 13) {
        alert();
    }
});

С приведенным выше кодом журналы консоли отображаются для i , n & d , но не для клавиши Enter * , и, следовательно, предупреждение никогда не показывается.
Я полагаю, что стандартное поведение select2 не позволяет запускать мой код.

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

https://jsfiddle.net/bwp0svq6/1/

Ответы [ 2 ]

3 голосов
/ 07 марта 2019

Событие нажатия клавиши устарело.Вы можете использовать keydown вместо. 

$(document).ready(function() {
  $('#example').select2();

  $(".select2-search__field").on("keydown", function(e) {
    if (e.keyCode == 13) {
      alert();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />

<select id="example" multiple="multiple" style="width: 300px">
  <option value="1">Argentina</option>
  <option value="2">Brazil</option>
  <option value="3">China</option>
  <option value="4">India</option>
  <option value="5">Indonesia</option>
</select>
0 голосов
/ 07 марта 2019

Почему бы просто не использовать этот код для проверки, поскольку может быть щелчок мыши: 

   

$('#example').select2();

$("#example").on("click change keydown", function (e) { 
        var keycode = (event.keyCode ? event.keyCode : event.which);       
        if (keycode == 13) {
            console.log('inside')
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="example" multiple="multiple" style="width: 300px">
    <option value="1">Argentina</option>
    <option value="2">Brazil</option>
    <option value="3">China</option>
    <option value="4">India</option>
    <option value="5">Indonesia</option>    
</select>

Надеюсь, это поможет.

...