HTML5 Datalist is a new html tag shipped with HTML5 specification. HTML5 Datalist can be used to create a simple poor man’s Autocomplete feature for a webpage.
In this tutorial we will go through the basics of HTML5 Datalist tag and check some quick examples of autocomplete.
Introduction to HTML5 Datalist tag
As part of HTML5 specification a new tag
<datalist> has been introduced. Using this tag, we can define a list of data which then can be used as list for an input box. We can create a simple Autocomplete feature using this tag.
Consider a textbox to take country name input from user.
See how we used attribute list and pass a list of countries called ‘countries’. We can define this list of countries using datalist tag.
So we created a list of countries using
<datalist> tag. The id of datalist tag must match with the list attribute of the input box.