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

# Correctif « datalist » (saisie automatique)

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).

Needs translation

## Use when

- Adding auto-complete functionality to specific text input fields

## Working example

    <label for="city">City</label>
    <input type="text" id="city" name="city" list="suggestions" />
    <datalist id="suggestions">
    	<!--[if lte IE 9]><select><![endif]-->
    	<option label="" value="Calgary"></option>
    	<option label="" value="Edmonton"></option>
    	<option label="" value="Iqualuit"></option>
    	<option label="" value="Ottawa"></option>
    	<option label="" value="Montreal"></option>
    	<option label="" value="St. John"></option>
    	<option label="" value="St. John's"></option>
    	<option label="" value="Toronto"></option>
    	<option label="" value="Vancouver"></option>
    	<option label="" value="Whitehorse"></option>
    	<option label="" value="Winnipeg"></option>
    	<option label="" value="Yellowknife"></option>
    	<!--[if lte IE 9]></select><![endif]-->
    </datalist>

- English example
- French example

## How to implement

To use the polyfill, the standard `input list` attribute and `datalist` element must be used. In cases where a browser doesn't support this attribute and element, the polyfill is automatically loaded.

## Configuration options

Configuration options available for the `datalist` element (HTML5 specification)

## Events

Event | Trigger | What it does
--- | --- | ---
`wb-init.wb-datalist` | Triggered manually (e.g., `$( "input[type=list]" ).trigger( "wb-init.wb-datalist" );`). | Used to manually initialize the `datalist` polyfill on an `input` element with a `list` attribute. Note: The `datalist` polyfill will be initialized automatically unless the `input list` attribute and `datalist` element are added after the page has already loaded.
`wb-ready.wb-datalist` (v4.0.5+) | Triggered automatically after the `datalist` polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native `datalist` support. | Used to identify where the `datalist` polyfill initialized (target of the event)
    $( document ).on( "wb-ready.wb-datalist", "input[type=list]", function( event ) {
    });
    $( "input[type=list]" ).on( "wb-ready.wb-datalist", function( event ) {
    });
`wb-ready.wb` (v4.0.5+) | Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
    $( document ).on( "wb-ready.wb", function( event ) {
    });

## Source code

Datalist polyfill source code on GitHub

Date de modification :
  2014-08-06