如何捕获 select2 的回车键

Question

我有一个 select2 个国家/地区下拉列表（多个 select）。当用户键入关键字时，它会在菜单中显示相关项目。
例如，如果用户键入 ind，菜单将显示 India 和 Indonesia。如果按下回车键，第一项 (India) 将被 selected。这是默认行为。

现在，当用户键入 ind 并按回车键时，我想 select 这两个国家/地区。

$(".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/

Answer 1

为什么不简单地使用此代码来检查，因为可以单击鼠标：

   

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

希望对您有所帮助。

Answer 2

按键事件已被弃用。您可能想改用 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>

如何捕获 select2 的回车键

How to capture enter key press for select2

jquery

jquery-select2