What is html5 datalist tag

Datalist is advance html5 tag to display per-defined list with auto-complete feature, You can say it is advanced list box to display all the per-defined values with extra option like auto-complete.



In the below example i am going to create datalist of countries.

Defining datalist

<datalist id="countries">
<option value="Afghanistan">
</option>
<option value="Albania">
</option>
<option value="American Samoa">
</option>
<option value="India">
</option>
<option value="United Kingdom">
</option>
<option value="United State">
</option></datalist>

Assigned id to datalist called countries

Use the input type=”text” element’s list attribute to bind it together with a datalist element.

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

Browser Compatibility

Crome Firefox (Gecko) Internet Explorer Opera Safari
20+ 8.0+ 10.0+ 9.0+ Not supported




As seen in above compatibility table, not all browser supports html5 datalist tag. If you are using datalist, the older browser will simply ignore the datalist tag and renders list values rest of the webpage. The textbox which is linked to datalist will remain just a textbox. No autocomplete will be added.

DEMO

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.