Des menus déroulant avec Chosen

Chosen est un plugin jquery qui permet de réaliser des inputs de type select travaillés, et avec un champs de recherche dans les propositions.

Voici un exemple de champs select généré avec l’aide de chosen :

Le plugin permet une recherche rapide des options par l’utilisateur dans une liste très grande, comme ici avec la liste de tout les pays. En plus ce ça son design modern est très soigné.

Mais il s’agit ici d’un champs ou l’utilisateur ne peut faire qu’un seul choix. Le plugin permet aussi de gérer les selects à choix multiple:

Encore une fois on a la possibilité de faire une recherche textuelle mais en plus on voit s’afficher la liste des options choisies dans un champs dédié. Il est possible à tout moment d’en supprimer un précédement choisi.

Pour la mise en place il va falloir inclure le ficher CSS et le fichier JS.
Après il vous suffira d’ajouter une classe « chosen » sur votre champs select :

<select name="blabla" id="blabla" class="chosen">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<!-- l'appel au plugin -->
<script>
$(function(){
   $(".chosen").chosen();
}
</script>

Et voila vous avez maintenant des champs select de compet’.

Site officiel ou Télécharger