在 select2 中捕获输入键

Posted 2023-05-07

【中文标题】在 select2 中捕获输入键

【英文标题】：capturing enter key in select2

【发布时间】：2014-01-13 22:05:41

【问题描述】：

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

强迫用户点击按钮在我看来有点沮丧。是否可以在 select2 中捕获回车键？我想让用户只需按回车键就可以将他/她的新语句添加到列表中。

【参考方案1】：

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

【讨论】：

对我来说，工作的选择器是'.select2-search > input.select2-input'，在选择 3.4.5

Keyup 事件绑定到 select2 搜索输入在 IE11 上不起作用。

小警告，如果您在同一页面上有多个 select2，如果您在他们的搜索字段中按 Enter，他们现在都将尝试addToList($(this).val());。我认为 select2 4.0 可能会解决这个问题（与更好的选择器携手并进），但我仍然坚持 3.5 仍在尝试解决 Bootstrap 更改。

“所有这些”，是的，因为选择器仅基于类。如果您只想在一个 select2 实例上启用此行为，只需调用 $('#my-select2-instance').on...

【参考方案2】：

我正在使用Select2 4.0.3，这对我有效：

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

【参考方案3】：

我正在使用 Select2 4.0。这对我有用；

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

【讨论】：

我正在使用 4.0.3，keyup 不再起作用。使用“输入”工作

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

【参考方案4】：

这些在Select2 4.0.6-rc1 中都不起作用，但是这样做了：

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

手册中有详细说明here。

【参考方案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")
  
)