Dekel Dekel - 12 days ago 6
Ajax Question

select2 on <input> doesn't trigger ajax calls

When using

select
tag with
ajax
everything works perfectly, however when trying to add the
select2
to an
input
tag - the
ajax
never called.

Here is an example of 3 select2 instances:


  1. <select>
    tag with ajax (works great)

  2. <input>
    tag without ajax (works great)

  3. <input>
    tag with ajax (this is the problematic one)





var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$(".select2-no-ajax").select2({
data: data
})

$(".select2-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;

return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});


/*************** Functions taken from select2 source ****************/

function formatRepo (repo) {
if (repo.loading) return repo.text;

var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}

markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";

return markup;
}

function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}

input, select {
width: 100%;
}
div.good {
color: green;
}
div.bad {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://select2.github.io/css/s2-docs.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>


<div class="good">This one works great (select tag with ajax):</div>
<select class="select2-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>

<br /><br />
<div class="good">This one works great (regular input):</div>
<input class="select2-no-ajax" />

<br /><br />
<div class="bad">This on is problematic (input with ajax) - ajax request never called:</div>
<input class="select2-ajax" />





Is it a bug in select2? Am I required to add something else to the options?

I'm using the latest version of select2 (v4.0.2)

Answer

The compatibility with the input tag is deprecated in Select2 4.0. It is now encouraged to use the <select> tag instead. See also the link below for more information.

https://select2.github.io/options.html#core-options

Comments