Correctif « datalist » (saisie automatique)

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

But

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. Met en œuvre le modèle de conception « Auto Complete » de WAI-ARIA (anglais seulement).

Exemple

Visualiser le code 
<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>
Date de modification :