Comprendre les éléments HTML5 <datalist>
Un billet de Didier Mouronval

Le , par Bovino, Rédacteur
L'autocomplétion native en HTML5

L'autocomplétion, ou liste de suggestions, est l'une des fonctionnalités les plus courantes du développement Web.
Il s'agit de suggérer des choix possibles lors de la saisie dans un champ de formulaire.

Jusqu'à présent, il était obligatoire de développer cette fonctionnalité en JavaScript, mais grâce à HTML5, il est possible désormais de se passer de langage de script avec l'élément <datalist>.
Cet élément va permettre d'indiquer un certain nombre d'éléments prédéfinis à suggérer lors de la saisie.

Vous pouvez voir un exemple fonctionnel sur cette page.

Syntaxe

La syntaxe est un peu particulière car il va s'agir de lier un champ de formulaire avec un groupe d'options via des attributs, à l'image de ce qui existe déjà avec les attributs for ou usemap des balises <label> ou <img>.
Dans notre cas, la balise <input> devra posséder un attribut list dont la valeur vaudra celle de l'identifiant de la balise <datalist> associée :
Code html : Sélectionner tout
1
2
3
<input list="maliste" /> 
<datalist id="maliste"> 
</datalist>
Vous pouvez constater que la balise <datalist> nécessite une balise fermante, car elle ne doit pas être vide : elle contiendra des balises <option> qui vont correspondre à toutes les valeurs prédéfinies :
Code html : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<input list="langues" placeholder="Choisir une langue" onfocus="this.value=''" /> 
<datalist id="langues"> 
	<option value="fr">Français</option> 
	<option value="en">Anglais</option> 
	<option value="de">Allemand</option> 
	<option value="bg">Bulgare</option> 
	<option value="hr">Croate</option> 
	<option value="da">Danois</option> 
	<option value="es">Espagnol</option> 
	<option value="et">Estonien</option> 
	<option value="fi">Finnois</option> 
	<option value="el">Grec</option> 
	<option value="hu">Hongrois</option> 
	<option value="ga">Irlandais</option> 
	<option value="it">Italien</option> 
	<option value="lv">Letton</option> 
	<option value="lt">Lituanien</option> 
	<option value="mt">Maltais</option> 
	<option value="nl">Néerlandais</option> 
	<option value="pl">Polonais</option> 
	<option value="pt">Portugais</option> 
	<option value="ro">Roumain</option> 
	<option value="sk">Slovaque</option> 
	<option value="sl">Slovène</option> 
	<option value="sv">Suédois</option> 
	<option value="cs">Tchèque</option> 
	<option>Franglais</option> 
</datalist>
L'on peut noter dans l'exemple ci-dessus que les options peuvent posséder un attribut value. Lorsque l'on sélectionne une valeur, si l'option associée possède un attribut value, c'est la valeur de cet attribut qui sera placée dans le champ texte, sinon, c'est le texte affiché par l'option.
Il faut aussi noter que les options ne limitent pas la saisie dans le champ : il est toujours possible d'entrer la valeur que l'on veut même si celle-ci ne correspond à aucune option de <datalist>.

Voir un exemple d'utilisation.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster un commentaire

Avatar de kolodz kolodz - Modérateur https://www.developpez.com
le 02/04/2015 à 16:30
Merci pour le billet, c'est une fonctionnalité HTML5 très intéressante !
Avatar de Z4ng3tsu Z4ng3tsu - Membre du Club https://www.developpez.com
le 22/04/2015 à 9:18
Merci beaucoup pour ce billet ! Fonctionnalité qui sera sûrement utilisée plus d'une fois. Moins de prise de tête pour du css/javascript maintenant !
Contacter le responsable de la rubrique (X)HTML