HTML5 Datalist Element

Description

HTML5 introduced the new <datalist> tag, which specifies a list of predefined <input> element options. It is used to provide the autocomplete feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. This element has no other attributes than the global attributes, common to all elements. The id of the datalist element must match with the list attribute of the input box.Keep in mind that Safari doesn’t support datalist yet. If you are using this element with an unsupported (older) browser version, the most browsers will simply ignores the datalist tag and render rest of the webpage. Internet Explorer 9 and below is a little bit special, it will simply print the option values to the page (a possible workaround can be found at http://viralpatel.net/).

Usage

Here you can see a Basic example on how to use the datalist tag in HTML5.

<input name="datalistTest" list="datalistTest" />
<datalist id="datalistTest">
    <option value="codesnippets">
    <option value="fesslersoft">
    <option value="code">
    <option value="snippets">
    <option value="fessler">
    <option value="soft">
</datalist>

Live Sample

Keep in mind that this Live-Example only works on supported Browsers.



JSFiddle’s

If you have any questions or suggestions feel free to rate this snippet, post a comment or Contact Us via Email.

Related links:

Compatibility:
working Chrome
working Internet Explorer
not tested Firefox
not working Opera
not working Safari

7 thought on “How to use the HTML5 datalist tag”

Leave a Reply