De l’auto-complétion juste en HTML5

7.00 avg. rating (80% score) - 1 vote
Partager:

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


Tous les codes sont testés et sont fonctionnels, si un de ces codes ne marche pas chez vous, merci de me le signaler.
Partager:
7.00 avg. rating (80% score) - 1 vote

Vous aimerez aussi...

Laisser un commentaire