Correctif « datalist » (saisie automatique)
Looking for WET v3.1?
WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.
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.
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>
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., $elm.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. |
Source code
- Date modified: