Autocomplétion native en HTML5

Dans ce bref article, nous allons voir comment mettre en oeuvre une zone de saisie avec auto-complétion, sans recourir à jQuery ni à JavaScript, en pur HTML5. Par Steve Pear.

Par

Dans ce bref article, nous allons voir comment mettre en oeuvre une zone de saisie avec auto-complétion, sans recourir à jQuery ni à JavaScript, simplement en utilisant l’attribut list d’input et l’élément datalist, autrement dit en pur HTML5.

Exemple, les pâtes :

Comment ça marche ?

Ajoutez l’attribut list à un champ de saisie, puis créez un élément datalist. La valeur de list doit être identique à l’id du sélecteur datalist.

//HTML
<input list="pasta">

<datalist id="pasta">
  <option>Cannelloni</option>
  <option>Fiorentine</option>
  <option>Gnocchi</option>
  <option>Pappardelle</option>
  <option>Penne lisce</option>
  <option>Pici</option>
  <option>Rigatoni</option>
  <option>Spaghetti</option>
  <option>Tagliatelle</option>
</datalist>

Compatibilité navigateurs

À ce jour, l’élément datalist et l’attribut list d’input sont supportés dans Chrome 31+, IE10+, Firefox 34+ et Opera 26+. Pas de compatibilité pour l’instant avec Safari, mais les zones de saisie comportant l’attribut list fonctionnent normalement, elles ignorent simplement l’élément <datalist>.

Pour vérifier la compatibilité, vous pouvez vous référer comme d’habitude à Can I Use.


Intéressé par HTML ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur HTML parus dans la Cascade.

Du même auteur, dans la Cascade :

Centrer un bloc div, guide complet
Fixer une div, guide complet

Ressources complémentaires en français

HTML5, l’élément datalist, par Alsacréations


original paru le dans le blog de l’agence Tipue.

Sur l’auteur : est responsable de l’agence Tipue basée à Londres, on peut le suivre sur Twitter.

Traduit avec l’aimable autorisation de Tipue et de l’auteur.
Copyright Tipue © 2015.