In the previous blogpost Searchable dropdowns with Select2 and Bootstrap I gave an introduction to Select2 combined with Bootstrap. In that post I used static data as an example. In this post I will continue from there. Here I will demonstrate how Select2 can be used with AJAX for dynamic retrieval of data, still in a searchable dropdown via the Select2 library. I will discuss some of the possibilities of Select2 using AJAX.
To add AJAX to your Select2 dropdown use the ajax option:
$('#select2-dropdown').select2({ ajax : { url: 'https://opendata.rijksoverheid.nl/v1/sources/rijksoverheid/infotypes/news?output=json', dataType: 'json', processResults: function(data) { return { results: data } } }, placeholder: 'Select an option...', allowClear: true, language: "nl", width: null, templateResult: formatResult, // tell Select2 how results should be displayed in the dropdown templateSelection: formatSelection // tell Select2 how selected results should be displayed in dropdown });
Inside the ajax option I have specified the URL to retrieve the data from, in this case I have used an open data news stream of the Dutch government. In processResults the returned data is simply returned as results. The templateResult allows to specify how Select2 should display the results in the dropdown when the dropdown is open and the options are displayed. The templateSelection allows to tell Select2 how to display the selected option (regardless if it’s open or closed).
function formatResult (result) { return result.title; } function formatSelection (result) { return result.title; }
As you can see I simply return the title for both formatting options. It is also possible to add markup to the options and to the selected option by adding the following as a parameter to Select2 [1]:
escapeMarkup: function (markup) { return markup; }
On the examples page of Select2 the AJAX example uses the following formatting functions [1]:
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; }
This results in the following display:
For the complete example visit the Select2 examples page. Here you can also find how you can add the search query as a parameter.
References: