Chosen – jQuery plugin

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.

jquery

Lien github :Chosen

select

 

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.

select_newElementselect_newElementCree

 

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.