De l’auto-complétion juste en HTML5

Il y a des fonctionnalités qu’on se doit d’avoir pour faciliter la vie a nos visiteurs comme par exemple de l’auto-complétion ou d’auto-suggestion. Avant il fallait passer par du JS… Des truck pas toujours facile pour nous débutant, heureusement avec le HTML5 plus besoin de tous ça.

Un petit exemple:

<label for="choix_bieres">Indiquez votre bière préférée :</label>
<input list="bieres" type="text" id="choix_bieres">
<datalist id="bieres">
  <option value="Meteor">
  <option value="Pils">
  <option value="Kronenbourg">
  <option value="Grimbergen">
</datalist>

Lien vers une petite démo: lien

Bien sur si votre navigateur n’est pas compatible l’input sera quand même fonctionnel, mais pas d’auto-complétion.

Pour finir petite chose a savoir, on peut utiliser la même liste de suggestion pour plusieurs input, ce qui est pratique car ça ne donne qu’une liste a maintenir:

<p>
  <label for="choix_bieres">Indiquez votre bière préférée :</label>
  <input list="bieres" type="text" id="choix_bieres">
</p>

<p>
  <label for="choix_bieres_ami">Indiquez le choix de votre ami :</label>
  <input list="bieres" type="text" id="choix_bieres_ami">
  <datalist id="bieres">
    <option value="Meteor">
    <option value="Pils">
    <option value="Kronenbourg">
    <option value="Grimbergen">
  </datalist>
</p>

Source: alsacreations.com