在Select2中捕获回车键

Question

我正在使用select2来呈现可编辑的选择框。当用户输入一个在list(select2, data)中不存在的语句时，我会显示一个按钮以添加此语句到列表中。

强制用户点击按钮似乎有点令人沮丧。 是否可以在 select2 中捕获回车键？ 我想让用户只需按下回车键即可将他/她的新语句添加到列表中。

- Muatik

Answer 1

$('select2-search-field > input.select2-input').on('keyup', function(e) {
   if(e.keyCode === 13) 
      addToList($(this).val());
});

- Vishal

---

对我来说有效的选择器是'.select2-search > input.select2-input'，在选择版本3.4.5时。 - ElDog

在IE11上，keyup事件绑定到select2搜索输入框无法正常工作。 - user3816152

小细节：如果您在同一页上有多个select2，则它们所有都会尝试从其搜索字段按Enter键时执行addToList（$（this）.val（））;。我认为select2 4.0可能会解决这个问题（与更好的选择器一起），但我仍然被困在3.5中，试图解决Bootstrap的变化。 - radiok

“all of them”，是的，因为选择器只基于类。 如果您想仅在一个select2实例上启用此行为，请调用$('#my-select2-instance').on... - Pierre-Olivier Vares

Answer 2

我正在使用 Select2 4.0.3，这对我起作用：

$(document).on('keyup', '.select2-search__field', function (e) {
    if (e.which === 13) {
        alert('Pressed enter!');
    }
});

- aleixfabra

Answer 3

我正在使用Select2 4.0版本。这对我来说很有效。

$('.select2-search__field').on('keyup', function (e) {
        if (e.keyCode === 13)
        {
            alert('Enter key');
        }
    });

- Baqer Naqvi

---

我正在使用4.0.3版本，keyup不再起作用了。使用"input"可以解决问题。 - Benjamin Intal

我确认，使用“input”而不是“keyup”。 在我的情况下，我想在更改$('.select2-search__field')的值后运行触发器，并且我使用了以下代码： $('.select2-search__field').val('new_value').trigger('input'); - Lorenzo Magon

Answer 4

这些方法在Select2 4.0.6-rc1中都不可用，但是以下方法可以：

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

这个内容在手册中有详细说明，点击此处查看。

- t56k

Answer 5

这段代码可以帮助你进行基于类的选择：

$('.select2-selection').on('keyup', function(e) {
    var YOUR_SELECT2_CUSTOM_CLASS = $(this).attr('aria-labelledby').includes('YOUR_SELECT2_CUSTOM_CLASS')
    if (YOUR_SELECT2_CUSTOM_CLASS && e.keyCode === 13) {
        alert($(".YOUR_SELECT2_CUSTOM_CLASS").val())
    }
});

或者您可以使用这个：

$("YOUR_CUSTOM_CLASS").bind("change keypress", function() {
  if (window.event.keyCode === 13) {
    alert("Enter Captured")
  }
})

- Ali

Answer 6

如果使用传统的select2（某些3.5.4版本），则可以使用此选项：

$('#mySelect2').on('select2-selected', function (e) {
    console.log(e.params);
    // keypress enter script
});

这对我帮助很大。 如果页面上有两个select2，那么这是一个很好的选择！

- Vaflan