Voulez-vous faire un formulaire d’auto complétion avec HTML5 ? Dans cet article je veux vous présenter comment le faire sans trop d’effort. Habituellement, pour faire une telle chose, on fait recourt au Javascript mais ce dernier a une réputation d’être difficile à prendre à main.
Système d’auto complétion, KEZAKO ?
N’allons pas par quatre chemins, un système d’auto complétion c’est du genre ça
Ou ça
Bref, cela complète le terme qu’on écrit au fur et à mesure qu’on l’écrit.
Auto complétion en HTML5
En HTML5, c’est très simple de faire un système d’auto complétion. Avec la balise datalist
, vous pouvez lister les éléments avec la balise option
de la même manière que ça se fait avec la balise select
<datalist id="fruits"> <option value="Mangue" /> <!-- D'autres élément option --> </datalist>
Après vous avez besoin d’un input
de type text
ou search
par le quel vous allez indiquer l’attribut list
qui aura comme valeur l’id de la balise datalist
précédent.
<input type="search" name="q" list="fruits" />
Le code complet est donc
<form action="search" method="get"> <label for="search">Choisissez votre fruit <input type="search" id="search" list="fruits" name="q" /> </label> <datalist id="fruits"> <option value="Mangue" /> <option value="Avocat" /> <option value="Orange" /> <option value="Ananas" /> <option value="Pastèque" /> </datalist> </form>
Exemple :
Remarques
Cette manière de faire bien que très simple mais a certains désavantages. Pour par exemple faire un système d’auto complète de données statique, ce système sera suffisant.
Par exemple, l’auto complétion des villes, communes; mais quand c’est une base de données dynamiques comme les articles d’un blog ou bien évidemment le cas de Google ou Facebook dans les images ci-haut, malheureusement il n’y a pas de choix que de faire recourt à JavaScript et l’API Ajax.
Vous pouvez utilisez cette librairie jQuery EasyComplete qui est facile à mettre en place.