web-dev-qa-db-ja.com

select2でEnterキーをキャプチャする

select2 を使用して編集可能な選択ボックスを表示しています。ユーザーがlist(select2, data)に表示されないステートメントを作成すると、このステートメントをリストに追加するためのボタンが表示されます。

ユーザーにボタンをクリックさせることは、私には少しイライラしているように思えます。 select2でEnterキーをキャプチャすることは可能ですか？ユーザーがEnterキーを押すだけで新しいステートメントをリストに追加できるようにしたい。

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

Select24.0を使用しています。これは私にとってはうまくいきます。

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

私はSelect2 4.0.3を使用していますが、これは私から機能します。

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

これらはいずれもSelect2 4.0.6-rc1では機能しませんでしたが、これは機能しました。

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

マニュアルに詳しく記載されています こちら 。

1
okay56k

このコードは、クラスベースの選択に役立ちます。

$('.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")
  }
})
0
Ali