- Skip to main content
- Skip to "About this site"

# Datalist polyfill (auto-complete)

- Documentation
- Questions or comments?

## 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

City
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:
  2014-08-06