Chosen est un petit script JS permettant de modifier vos "select" en leurs apportant des fonctionnalité ainsi que de l’ergonomie.

Ce script est compatible jQuey mais aussi Prototype.

A partir d’un simple "select" HTML et quelle que soit la sélection (simple ou multiple), Chosen va transformer le markup HTML pour en proposer différentes améliorations :

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


Pour utilisé ce script avec jQuery, il suffira de sélectionner les "select" à transformer afin d’activer le plugin.

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

Activer le markup HTML

<select data-placeholder="Choose a country..." multiple class="chosen-select">

Les évènement "change" étant compatibles avec Chosen, vous pouvez donc étendre vos scripts facilement.

Niveau compatibilité navigateur, tous les navigateurs modernes sont supportés. IE pour sa part n’est compatible qu’à partir de la version 8. (Sauf pour le CSS3 pour lequel il faudra rajouter un script JS)

Source