Niveau Niveau débutant

HTML5 : L'élément <datalist>

Articlehtml

Publié par le , mis à jour le (209287 lectures)

xhtml formulaire html5 datalist autocomplétion

Avec l'annonce d'HTML5, de grandes nouveautés accompagnent les formulaires. Ils peuvent enfin s'enrichir afin de s'adapter au plus près des nouveaux besoins. Ainsi l'élément <datalist> fait son entrée.

Des suggestions de choix

Inauguré avec la vague HTML5, <datalist> est un élément de formulaire permettant de lier une liste de choix à un élément input. Il est voué à fournir des fonctionnalités d'auto-complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche, voire à d'autres éléments d'entrée, tels que les nouveaux types <input type="range">.

Par défaut, <datalist> demeure invisible. Lors de la frappe, ou en appuyant sur la touche  (flèche bas) , la liste de choix apparaît et autocompléte le champ de formulaire rattaché.

Compatibilité navigateur de l'élément <datalist>

Navigateurs Versions
Firefox Firefox 4.0+
Opera Opera 9.0+
Opera Mobile 10.0+
Internet Exlorer Internet Explorer 10+
Google Chrome Chrome 20+

Un navigateur ne supportant pas l'élément n'affichera aucune suggestion. Le champ <input> lié restera cependant totalement fonctionnel, l'entrée sera libre. L'exemple présenté dans cet article ne fonctionne que sur les navigateurs compatibles. Pour les alternatives, se rapporter au dernier point.

Utilisation classique

Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte <input type="text"> à une liste de suggestions.

<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>

Démonstration

Datalist IE10

Aperçu sous Internet Explorer 10

Le champ de formulaire (input) et la liste de suggestions (datalist + option) sont reliés grace à la valeur commune des attributs list rattaché à l'input, et id de la datalist.

Utilisation multiple

Il est possible d'utiliser la même liste de suggestions pour plusieurs champs de formulaire. Cela peut être pratique pour les champs dupliqués, il n'y a ainsi qu'une seule liste à 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>

Démonstration

Alternative vers <select>

Pour les navigateurs ne supportant pas <datalist>, une alternative simple peut être trouvée en complétant le formulaire par un <select>. Le champ primaire reste libre, tandis que la liste de choix est présentée pour ces navigateurs.

<label for="www">Adresse web</label>
<input id="www" type="url" list="urldata" name="adresseweb">
<datalist id="urldata">
  <label for="adresse">ou sélectionner dans la liste</label>
  <select name="adresse" id="adresse">
    <option value="http://www.alsacreations.com/">http://www.alsacreations.com/</option>
    <option value="http://www.bing.com/">http://www.bing.com/</option>
    <option value="http://www.google.fr/">http://www.google.fr/</option>
    <option value="http://www.yahoo.fr/">http://www.yahoo.fr/</option>
  </select>
</datalist>

Démonstration

Datalist avec select

Il appartient ensuite au script traitant les données côté client (navigateur) ou côté serveur de déterminer de quel champ proviennent les données : a priori il faudra prendre en compte la liste de choix uniquement si le champ est laissé libre.

Dans le même ordre d'esprit, un contenu texte stocké dans <datalist>, en-dehors des options, sera affiché par les navigateurs qui ne reconnaissent pas cet élément.

<datalist>
  Votre navigateur ne supporte pas datalist en HTML5
  <option value="option1">Choix1</option>
  <option value="option2">Choix2</option>
  <option value="option3">Choix3</option>
</datali>

Valeurs possibles pour les options

L'étiquette affichée est définie par l'attribut label. Cependant, il est important de garder à l'esprit que la valeur utilisée au final est celle donnée aux attributs value des éléments <option> et non à leur contenu (situé entre la balise ouvrante et la balise fermante) ou à la présence de l'attribut label.

<datalist id="elements">
  <select>
    <option value="sans label ni contenu"></option>
    <option value="sans label avec contenu texte">le texte</option>
    <option value="avec label" label="le label"></option>
    <option value="avec label et texte" label="le label">le texte</option>
  </select>
</datalist>

Si des valeurs différentes sont spécifiées pour deux ou trois de ces possibilités (value, label ou contenu texte), par exemple <option value="kro" label="Kronenbourg, la bière">Kronenbourg</option> le comportement des navigateurs sera disparate :

  • Internet Explorer 10+ se comportera de façon correcte,
  • Opera 9+ affichera un maximum d'informations en combinant value et label mais pas le texte contenu,
  • Mozilla Firefox 9+ affichera de préférence le label, puis le contenu texte, puis la valeur figurant dans l'attribut value

Datalist rendu

Démonstration

Pour les navigateurs ne supportant pas <datalist>, l'élément <select> est toujours affiché en dernier recours, mais ses options sont aussi affectées par les précédentes informations, mais avec une meilleure cohérence dans l'interprétation : toutes les options sont affichées de la même façon. Notons aussi que les options ne peuvent être groupées avec <optgroup> comme dans une liste de choix <select>.

Autres éléments concernés

La liste de données peut être potentiellement appliquée à d'autres éléments d'entrée, et n'est pas limitée à un <input type="text">. Si le navigateur le supporte, elle a pour vocation d'épauler d'autres types, par exemple <input type="range"><input type="email" multiple> ou <input type="url">.

<label for="lumi">Luminosité</label>
<input id="lumi" type="range" list="lumidata" min="0" max="100" value="50" step="1">
<datalist id="lumidata">
  <option label="Minimum" value="0">
  <option label="Maximum" value="100">
</datalist>
<label for="www">Adresse web</label>
<input id="www" type="url" list="urldata">
<datalist id="urldata">
	<option value="http://www.alsacreations.com/">
	<option value="http://www.bing.com/">
	<option value="http://www.google.fr/">
	<option value="http://www.yahoo.fr/">
</datalist>

Datalist Opera

Aperçu sous Opera 11.6

Caractère dynamique

Le contenu de l'élément <datalist> peut être manipulé dynamiquement dans le document, par JavaScript et l'API DOM notamment. Ceci permet d'ajouter ou de supprimer des options à la demande, par exemple en fonction d'un critère local (une case à cocher, une autre condition) ou en fonction du retour d'un appel AJAX avec XMLHttpRequest, voire avec un framework JavaScript tel que jQuery.

Propriétés de l'élément <datalist>

Propriété Détails
Modèles de contenu autorisés Zéro ou plusieurs <option>
Parents autorisés Tout élément pouvant contenir des éléments de phrasé, à l'exception de <a> et <button>
Omission de balise Les balises ouvrantes et fermantes sont obligatoires

Alternatives pour les anciens navigateurs

Cet élément étant présent en dur dans le document HTML, des frameworks JavaScript appropriés (jQuery, Dojo...) ou des scripts spécifiques peuvent aller y piocher les informations pour construire une auto-complétion dynamique.

Commentaires

Juste une question: les navigateurs enregistrent les dernières données entrées dans un formulaire texte pour faciliter les prochaines saisies (fonctionnalité de base de la plupart des navigateurs).
Du coup, comment les navigateurs qui implémentent le datalist gèrent cela. Est-qu'en présence de datalist cette fonctionnalité est désactivée, où y'a t-il un conflit entre les deux?

Dans firefox il afficheles deux champs dans la même liste separé par une barre presque transparente.
C'est très prometeur mais pas encore bon pour utilisation à mon avis puisque l'existence de la liste est encore "virtuelle" : on ne peut pas modifier son apparence avec css (ni même javascript) et son comportement dans le dom reste encore assez magique.
Je vais encore rester au javascript pour un certains temps :D

Datalist semble marcher mal sous Firefox Quantum 68.7.0esr (64 bits) utilisé sous Debian 68.7.0esr (64 bits)

En effet si je tape espace ou flèche descendante dans la datalist, je vois apparaître en plus des libellés des chiffres qui semble correspondre à des id relatifs à ces libellés. Le problème n'existe pas sous Chrome !

Est ce un bug connu ? Y a t il une solution ?