Auto complete for text input fields (input list datalist polyfill) - nschonni/wet-boew GitHub Wiki
Project lead: Eric Poirier (@ericpoirier)
The HTML5 input list attribute and the datalist element add auto-complete functionality to specific text input fields by dynamically displaying a list of words that match the user’s input. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA. Browsers that do not support the input list attribute and the datalist element natively ignore the auto-complete functionality and therefore, the text input field behaves like it normally does.
- In cases where browser don't support the attribute and element, the polyfill is automatically loaded.
- This polyfill ensures that the auto-complete functionality is added to the text input field and the necessary information is exposed to assistive technologies by adding WAI-ARIA.
To use the polyfill, the standard input list attribute and datalist element must be used.
Note: Remove space in "< !--"
<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>
Auto-complete functionality is dependent upon native support for the HTML5 input list attribute and the datalist element or the auto-complete for text input fields polyfill.
The code for the auto-complete for text input fields is located in several places within the source folder of WET:
- js/polyfills/datalist.js - contains the JavaScript code for the auto-complete for text input fields polyfill
- js/sass/includes/_datalist.scss - contains the CSS for the auto-complete for text input fields polyfill
- js/sass/includes/_datalist-ie7.scss - contains the IE7-specific CSS for the auto-complete for text input fields polyfill
There are no known issues at this point in time.