Datalist polyfill (auto-complete)

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Purpose

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.

Example

View code 
<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="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="Montreal" value="Montreal"></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 modified: