May

07

How to do auto predictions on HTML form inputs using the <datalist> element

A useful new feature of HTML 5 is the <datalist> element, which lets you add "autocomplete" suggestions to an input field when the user types into it.

Data lists are very simple to use. First simply add the "list" attribute to an existing input field; this specifies which list you want to get data from.

<input type="text" list="listname" />

Next you need to create the actual list. It's made up of a <datalist> tag with nested option tags and has the general syntax as shown below. The <datalist> tag should have an "id" attribute that is the same as the "list" attribute on the input field. The <option> tags should have "value" attributes, which are the autocomplete results that appear when the user starts typing.

<datalist list="listname">
  <option value="Value A"/>
  <option value="Value B"/>
  <option value="Value C"/>
</datalist>

Once you've done you will end up with something like this (which is the code used in the screenshot above).

<p>What browser do you use?</p>
<input type="text" list="browsers" />

<datalist id="browsers">
  <option value="Chrome" />
  <option value="Internet Explorer" />
  <option value="Opera" />
  <option value="Firefox" />
  <option value="Safari" />
  <option value="Flock" />
</datalist>

At the time of writing this (May 2011) only Firefox and Opera support this tag. There is no support at the moment in Chrome (and Chromium), Safari and Internet Explorer.