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 :
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 :
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".
D'autres triggers sont disponibles ici.
Lien vers quelques exemples : https://harvesthq.github.io/chosen/