Chosen - Des select box plus sexy et riches avec jQuery

Chosen est un script JS permettant de transformer vos select boxes en select plus riches et ergonomiques.

A la fois compatible jQuery et Prototype, Chosen vous permettra de proposer à vos visiteurs une utilisation plus riche lors de la sélection d'items dans une select box.

En effet, à partir d'une simple select box HTML, qu'elle soit à sélection simple ou multiple, le script va transformer le markup HTML pour proposer différentes améliorations:

• Amélioration du style via du CSS3
• Sélection multiple à la Facebook
• Gestion des optgroup
• Permet de supprimer de la liste les éléments déjà sélectionnés
• Recherche dans les options du select
• Personnalisation du texte par défaut si aucun élément sélectionné
• Personnalisation du texte par défaut si aucun élément trouvé
• Etc

Côté utilisation, avec jQuery, il suffit de sélectionner les select à transformer pour activer le plugin:

$(".transformSelect").chosen({no_results_text: "Aucun résultat trouvé"});

Activera le markup HTML suivant:

<select data-placeholder="Choisissez une valeur" style="width:350px;" multiple class="transformSelect">

Les évènements change sont compatibles avec le plugin, vous pourrez donc étendre vos scripts facilement.

Au niveau de la compatibilité navigateur, tous les navigateurs modernes sont supportés, et notre cher IE est compatible dès la version 8. (Sauf pour le CSS3... mais on est habitué maintenant!)

Site Officiel