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

facebook auto complétion

Ou ça

auto complétion google

Bref, cela complète le terme qu’on écrit au fur et à mesure qu’on écrit le terme.

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

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.

Voir aussi  Emmet : Coder plus rapidement en HTML & CSS avec Emmet

Le code complet est donc

Exemple :
Voir aussi  L'endroit idéal pour Apprendre HTML et CSS en RDC


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.

Voir aussi  PWA : Comprendre les Applications Web Progressives

Si vous avez aimé ce post, acclamez-moi juste en dessous

Répondre

Votre email ne sera pas publié Required fields are marked *

Vous pouvez utiliser les balises HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.