capturing enter key in select2

Question

I'm using select2 to present an editable selectbox. When user writes a statement which does not appear in the list(select2, data), I show a button to add this statement to the list.

Forcing users to click the button seems to me a little bit frustration. Is it possible to capture enter key in select2? I want to make user able to add his/her new statements into the list just by pressing enter key.

Squamosal

Answer 1

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

Colier

For me the selector that worked was was '.select2-search > input.select2-input', on select 3.4.5 – Buckboard

Keyup event binding to select2 search input is not working on IE11. – Otherness

Minor caveat, if you have multiple select2's on the same page, all of them will now attempt to addToList($(this).val()); if you press Enter from their search fields as well. I think select2 4.0 might resolve this (hand in hand with a better selector) but I'm stuck with 3.5 still trying to work out Bootstrap changes. – Ipoh

"all of them", yes, since the selector is only class-based. If you want to enable this behaviour only on one select2 instance, just call $('#my-select2-instance').on... – Xerophyte

Answer 2

I'm using Select2 4.0.3 and this works form me:

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

Pluri

Answer 3

I am using Select2 4.0. This works for me;

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

Lobell

I'm using 4.0.3, keyup doesn't work anymore. Using "input" works – Carl

I confirm, use "input" instead of "keyup". In my case I want to run the trigger after changing the value of $('.select2-search__field') and I settled with this code: $('.select2-search__field').val('new_value').trigger('input'); – Miliaria

Answer 4

None of these worked in Select2 4.0.6-rc1, but this did:

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

It's detailed in the manual here.

Sandstorm

Answer 5

This code can help you with class-based selections:

$('.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())
    }
});

Or you can use this:

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

Homiletic

Answer 6

If legacy select2 is used (some 3.5.4), then this option can be used:

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

It helped me a lot. If you have two select2s on the page, then this is a great option!

Jag