Auto-complete

The datalist tag specifies a list of pre-defined options for an input element.

Example

Usage

<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="Barrie"></option>
   <option label="" value="Calgary"></option>
   <option label="" value="Charlottetown"></option>
   <option label="" value="Chibougamau"></option>
   <option label="" value="Chilliwack"></option>
   <option label="" value="Cold Lake"></option>
   <option label="" value="Dorval"></option>
   <option label="" value="Edmonton"></option>
   <option label="" value="Flin Flon"></option>
   <option label="" value="Hamilton"></option>
   <option label="" value="Iqualuit"></option>
   <option label="" value="Ottawa"></option>
   <option label="" value="Miramichi"></option>
   <option label="" value="Montreal"></option>
   <option label="" value="Red Deer"></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>