HTML5 : L'élément <datalist>

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 4.0+
	Opera 9.0+ Opera Mobile 10.0+
	Internet Explorer 10+
	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

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

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

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>

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>

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.

• jQuery HTML5 datalist plugin par miketaylr.
• Relevant Dropdowns par Chris Coyier.
• datalist fallback par adactio.
• Webshims Lib supporte datalist (inclus input[list], input[selectedOption], datalist[options]) par Alexander Farkas.