HTML5 <datalist> Element
The <datalist> element contains a predefined set of <option> elements relating to another element - such as an <input>
element. The options can be used to provide an autocomplete feature for text typed into a form field.
The contents of the <datalist> element are not initially displayed, but when text is typed into the related form control any options which match the current text are shown
in a list and the user can click the one that matches.
To associate the <datalist> with the <input> element it must have an id attribute with the same value as the
list attribute of the <input> element.
Example usage of the <datalist> element.
Code:
<label> Enter a region:<input type="text" name="countries"
list="region"><datalist id="region"><option value="North"><option value="North-East"><option value="East"><option value="South-East"><option value="South"><option value="South-West"><option value="West"><option value="North-West"></datalist></label>
Result:
If you start typing one of the regions and your browser supports <datalist> a drop-down list will appear of the options which match. At the time of
writing Chrome performs correctly, Firefox matches any letter in the words even when it is not the initial letter, and IE versions 9 or earlier don't support this element.
Dealing with non-supporting browsers.
The <datalist> element should also contain content for legacy browsers which don't have HTML5 support. This is done by including a <select> list
inside the <datalist> element which is shown to non-supporting browsers and hidden from supporting browsers which respond to the <datalist>.
Code:
<label> Enter a region:<input type="text" name="location"
list="region"></label>
<datalist id="region"><label> Or select from the list:<select name="location"><option>North<option>North-East<option>East<option>South-East<option>South<option>South-West<option>West<option>North-West</select></label></datalist>Result:
Supporting browsers show the same as before but non-supporting browsers now display a select list of the options available.