如何捕获Select2中按下回车键的事件

Question

我有一个选择国家的Select2下拉菜单（多选）。当用户键入关键字时，它会显示菜单中相关的项。
例如，如果用户键入ind，菜单会显示India和Indonesia。 如果按下回车键，则选择第一项（India）是默认行为。

现在，我希望在用户键入ind并按下回车键时，同时选择这两个国家。

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

使用上述代码，控制台日志会显示i、n和d，但不会显示Enter key，因此警报永远不会显示。
我猜测默认的select2行为阻止了我的代码被触发。
我该怎么办才能捕获按下"Enter"键呢？
https://jsfiddle.net/bwp0svq6/1/

- Qwerty

---

你能否创建一个演示来展示这个操作？ - guradio

@guradio 我已经添加了 jsfiddle 的链接，请看一下。 - sukesh

@guradio。它不起作用了。我在你的fiddle上更新了一个日志，请检查一下。 - sukesh

https://jsfiddle.net/68tovszd/1/ - sukesh

Answer 1

keypress事件已经被弃用，您可能希望使用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>

- User863

---

只是提供信息，keypress并没有被弃用。 - Rory McCrossan

Answer 2

我在输入时尝试将“-”破折号替换为空。我必须等待select2项目初始化，如下所示：

    $(document).ready(function () {
        window.setTimeout(function () {
            $(".select2-input").on("keyup", function (e) {
                //console.log('key pressed');
                var el = $(e.target);
                $(el).val($(el).val().replace('-', ''));//remove dashes
                if (e.keyCode == 13) {
                    alert('enter key');
                }
            });
        },500);
    
    });

- Jeremy Nicholls

Answer 3

为什么不直接使用这段代码进行检查，因为可能会有鼠标点击：

   

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

希望这能有所帮助。

- kshitij

---

你能解释一下这个是做什么的吗？这个UI不会有文本框来输入吗？如果没有，那就无法使用。另外，如果用户点击印度并选择印度尼西亚，这是没有意义的。 - sukesh

哦，不是那样的。只是你在使用multiselect和某个库，而我没有。这不会改变你的功能和用户界面。只需使用你的选择器ID与我的jQuery代码，你就可以开始工作了。例如：$('#here_your_id_of_select')。 - kshitij

使用Select2库的多选功能。这是重点。应该只捕获回车键。你的代码对我没用。你能在我的fiddle上试一下吗？检查一下。 - sukesh