- Passer au contenu principal
- Passer à « À propos de ce site »

# Correctif « datalist » (saisie automatique)

- Documentation
- Questions ou commentaires?

## 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

Ville
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 :
  2014-08-06