Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Select2 onkeyup not firing

I am trying to update the options of the Select2 input field with an AJAX call, but the onkeyup function linked to the input field does not run.

*Note that the onkeyup function does run when I set the multiple attribute of the select box as multiple="multiple", but when I try to get a single result like the select box by removing the attribute nothing happens

My HTML looks like this:

<select class="js-example-templating" style="width: 50%">
</select>

My jQuery looks like this:

ar all_options = [
    ['Alaskan/Hawaiian Time Zone', [['AK','Alaska'], ['HI','Hawaii']]],
    ['Pacific Time Zone', [['CA','California'], ['NV','Nevada'], ['OR','Oregon'], ['WA','Washington']]],
    ['Mountain Time Zone', [['CAAZ','Arizona'], ['CO','Colorado'], ['ID','Idaho'], ['MT','Montana'], ['NE','Nebraska'], ['NM','New Mexico'], ['ND','North Dakota'], ['UT','Utah'], ['WY','Wyoming']]]
];

function formatState(state) {
    if (!state.id) {
        return state.text;
    }
    var $state = $('<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>');
    return $state;
};

$(".js-example-templating").select2({
    minimumInputLength: 1,
    templateResult : formatState
});

$('.select2-search__field').on('keyup', function (e) {


    tmp_html = '';
    //do ajax call here

    $(all_options).each(function(i) {
        var group = all_options[i][0];
        var options = all_options[i][1];

        tmp_html += '<optgroup label="'+group+'">';

        console.log(options);

        $(options).each(function(i) {
            var option_id = options[i][0];
            var option_text = options[i][1];

            tmp_html += '<option value="'+option_id+'">'+option_text+'</option>';
        });

        tmp_html += '</optgroup>';  
    }); 

    //now add the new options to the select box

    $('.js-example-templating').html(tmp_html);
});  

The AJAX function has not been added, the onkeyup function at the moment just adds all the options, this will be added as soon as I can get the onkeyup function to run.

After this all the Select box is supposed to have the following options:

  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>

Thanx in advance


EDIT

The input field gets added automatically when the Select2 initialization starts. The code for the input field look like this:

<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox">

Here is a fiddle of what is happening: https://jsfiddle.net/Reckless/hz2vqzt7/

When you add the multiple="multiple" attribute and run again, it will update the available options, but without that it does not fire the onkeyup event

like image 576
Rickus Harmse Avatar asked Mar 31 '17 08:03

Rickus Harmse


1 Answers

I think the problem is due to the .select2-search__field input being dynamically added to the page when the select2 is initialised, and it not hooking into the event handlers for the onkeyup function you've written.

I changed your function definition from:

$('.select2-search__field').on('keyup', function (e) {

to

$(document).on('keyup', '.select2-search__field', function (e) {    

and it seems to work just fine, without the multiple attribute being set.

See the altered fiddle here: Updated Fiddle

like image 103
Whiplash450 Avatar answered Oct 06 '22 00:10

Whiplash450