Saisie automatique

Objet

L'attribut input list et l'élément datalist de HTML5 ajoutent des fonctionnalités de saisie automatique en affichant dynamiquement une liste de mots qui correspondent à l'entrée de l'utilisateur. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce correctif émule la même fonctionnalité en utilisant HTML générique et WAI-ARIA.

Avantages

• Dans les cas où le navigateur ne prend pas en charge l'attribut et l'élément, le correctif est automatiquement chargé.
• Ce correctif assure que la fonctionnalité de saisie automatique est ajouté et les informations nécessaires sont exposées aux technologies d'assistance en ajoutant WAI-ARIA.

Code d'exemple

<label for="city">Ville</label>
<input type="text" id="city" name="city" list="suggestions" />
<datalist id="suggestions">
	<!--[if lte IE 9]><select><![endif]-->
	<option label="Barrie" value="Barrie"></option>
	<option label="Calgary" value="Calgary"></option>
	<option label="Charlottetown" value="Charlottetown"></option>
	<option label="Chibougamau" value="Chibougamau"></option>
	<option label="Chilliwack" value="Chilliwack"></option>
	<option label="Cold Lake" value="Cold Lake"></option>
	<option label="Dorval" value="Dorval"></option>
	<option label="Edmonton" value="Edmonton"></option>
	<option label="Flin Flon" value="Flin Flon"></option>
	<option label="Hamilton" value="Hamilton"></option>
	<option label="Iqualuit" value="Iqualuit"></option>
	<option label="Ottawa" value="Ottawa"></option>
	<option label="Miramichi" value="Miramichi"></option>
	<option label="Montréal" value="Montréal"></option>
	<option label="Red Deer" value="Red Deer"></option>
	<option label="St. John" value="St. John"></option>
	<option label="St. John's" value="St. John's"></option>
	<option label="Toronto" value="Toronto"></option>
	<option label="Vancouver" value="Vancouver"></option>
	<option label="Whitehorse" value="Whitehorse"></option>
	<option label="Winnipeg" value="Winnipeg"></option>
	<option label="Yellowknife" value="Yellowknife"></option>
	<!--[if lte IE 9]></select><![endif]-->
</datalist>

Exemple pratique