Skip to main content

Datalist HTML5 Autocomplete Drop down

The datalist element is new addition into HTML5 tag it written as <datalist>, This element can change a simple dropdown box to an HTML auto complete dropdown yes it means you don’t need to learn or add any jQuery/Javascript to let this auto complete dropdown work. This is the beauty of HTML5.

HTML5 Datalist element

The datalist element is introduce as HTML5 tag, It seems like a simple <select> element as its dose have <option> and its value as an attribute of it but still it works differently let me show the exact syntax of it.

images

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

It’s a simple input text type element which have list and name attributes. Here notice the list element value “countries” as we are going to use this in <datalist> tag.

<datalist id="countries">
<option value="India">India</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</datalist>

The <datalist> element should have an id attribute. To link your datalist to an <input> element, you need to specify a list attribute on the input and set its value to the id of your datalist. This way both of the elements connect with each other.

Lets see the demo of countries datalist element, start typing ‘United’ in the input box at demo.

Demo


Code:

<input type="text" list="countries" name="mycountry" />
<datalist id="countries">
<option value="India">India</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</datalist>

Note: The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

You can see another example at http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

Browser Support

Element Chrome Edge IE Firefox Safari Opera
<datalist> 20.0 12.0 10.0 4.0 Not supported 9.0

Conclusion

The datalist element can provide native implementations of commonly used UI components. This element is really simple in use, browser vendors are removing the need for developers to rely on JavaScript libraries in these areas.

Hardik Joshi

Hardik Joshi is Founder, Developer and Writer at eCodezone.com, He loves to write usable code for the Web and other digital sources.