Select2 est une librairie très connue, la documentation officielle est disponible sur select2.org
J’avais besoin d’une liste déroulante qui récupère dynamiquement les coordonnées GPS depuis le site de laban
Le rendu avec select2 :
Pour cela il faut tout d’abord inclure les fichiers Js et CSS par défaut :
|
1 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> |
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> |
Afin de faire fonctionner le select2 il faut bien évidemment un select HTML :
|
1 2 |
<select id="form_city" name="form[city]" class="js-city-ajax"> </select> |
Ensuite, utilisez le code suivant pour générer le select:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$('.js-city-ajax').select2({ ajax: { url: "https://api-adresse.data.gouv.fr/search/", delay: 250, dataType: 'json', data: function (term) { var query = { q: term.term } return query; }, processResults: function (data) { return { results: $.map(data.features, function (item) { return { text: item.properties.city + ' (' + item.properties.postcode + ')', id: item.properties.city, lng: item.geometry.coordinates[0], lat: item.geometry.coordinates[1] } }) }; } }, minimumInputLength: 1, placeholder: 'Saisir une ville', }); |
Il faut aussi ajouter un listener lors du clic sur un élément :
|
1 2 3 |
$('#form_city').on('select2:select', function (e) { var data = e.params.data; }); |
Voilà vous avez l’ensemble du code pour utiliser la librairie select2 en Ajax.