Saisie automatique

Aperçu

Chef du projet : Eric Poirier (@ericpoirier)

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.

Mise en œuvre

Pour utiliser le correctif, l'attribut input list et l'élément datalist doivent être utilisés. Dans les cas où le navigateur ne soutien pas l'attribut input list ou l'élément datalist le correctif est automatiquement chargé.

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

Exemples

Développement

La remplissage automatique est dépendent sur le soutien natif pour l'attribute input list et l'élément datalist de HTML5 et le correctif pour la remplissage automatique.

Problèmes connus

Il n’existe actuellement aucun problème connu.

Historique des versions

Références