How to capture enter key press for select2

2
votes

I have a select2 dropdown for countries (multiselect). When user types keywords, it shows the related items in the menu.
For e.g., if user types ind, the menu shows India and Indonesia. If the enter key is pressed, the first item (India) is selected. This is the default behavior.

Now, I would like to select both the countries when user types ind and presses enter.

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

With the above code, the console logs show up for i, n & d but not for the Enter key, and hence the alert never shows.
I guess the default select2 behavior is preventing my code to be triggered.

What should I do, so that I can capture the enter key press.

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

2
jqueryjquery-select2
can you create demo showing the OP? – guradio
@guradio I have added the link to the fiddle. Please have a look. – Qwerty
@guradio. It's not working. Updated your fiddle with a log. pls check. – Qwerty
jsfiddle.net/68tovszd/1 – Qwerty

2 Answers

3
votes

The keypress event has been deprecated. You may want to use keydown instead.

$(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
votes

Why not simply use this code to check as there can be a mouse click :

   

$('#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>

Hope this helps.