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
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With