First8 staat voor vakmanschap. Al onze collega’s zijn een groot aanhanger van Open Source en in het bijzonder het Java-platform. Wij zijn gespecialiseerd in het pragmatisch ontwikkelen van bedrijfskritische Java toepassingen waarbij integratie van systemen, hoge eisen aan beveiliging en veel transacties een belangrijke rol spelen. Op deze pagina vind je onze blogs.

Searchable dropdown with Select2 using AJAX

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.

result

To add AJAX to your Select2 dropdown use the ajax option:

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).

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]:

On the examples page of Select2 the AJAX example uses the following formatting functions [1]:

This results in the following display:

Select2 example with styling searching github
source: https://select2.github.io/examples.html#data-ajax

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:

  1. Select2 AJAX example
  2. Searchable dropdowns with Select2 and Bootstrap