Bovino

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 - Visualiser dans une fenêtre à part

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 - Visualiser dans une fenêtre à part

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.