Le blog

Cet article a pour but de présenter comment à l'aide de chosen.js, mettre en place un menu déroulant (élément HTML select) ; faire des recherches améliorées avec l'auto-complétion et voir la possibilité d'ajouter un élément à notre liste.

Lien github :Chosen

Le menu déroulant :

<select id="chosen-select" >
	<option value="A">Valeur A</option>
	<option value="B">Valeur B</option>
	<option value="C">Valeur C</option>
	<option value="D">Valeur D</option>
	<option value="E">Valeur E</option>
	<option value="F">Valeur F</option>
</select>

<script>
   $(document).ready(function() {
       $("#chosen-select").chosen({});
   });
</script>

Cette fonction permet d'activer le plugin sur l'élément "chosen-select". Avec ce simple bout de code HTML et JavaScript, on peut chercher un élément dans une liste.

On peut changer le message lorsque qu'aucun élément n'est trouvé en utilisant l'option "no_results_text".

On peut changer le message par défaut du menu déroulant en utilisant l'option "placeholder_text_single".

Ex :

$("#chosen-select").chosen({
   placeholder_text_single: 'Choose a value',
   no_results_text: "No result. Press key 'Enter to add the value."
});

D'autres options disponibles ici.

Par défaut, le message suivant est indiqué lorsque l'on cherche un terme non présent dans la liste : "No results match "text_to_found".

A la place, avec l'aide de l'option "no_results_text" vu plus haut, on va laisser des instructions à l'utilisateur : "No result. Press key 'Enter' to add the value.".

Nous allons implémenter l'action à déclencher après la détection de l'événement "chosen:no_results".

$("#chosen-select").on('chosen:no_results', function(evt, params) {
	params.chosen.dropdown.find('input').on('keyup', function(e)
	{
		if(e.which == 13 && params.chosen.dropdown.find('li.no-results'.length > 0)) {
			var option = $("<option>").val(this.value).text(this.value);
			var select = $('#chosen-select');
					
			select.prepend(option);
			select.find(option).prop('selected', true);
			select.find(option).click();
			select.trigger('chosen:updated');
		}
	});
 });

D'autres triggers sont disponibles ici.

Lien vers quelques exemples : https://harvesthq.github.io/chosen/