HTML5 Tutorial - Input Attr : DataList

Input Attr : DataList

Datalist is seem like type-ahead auto suggest textbox as you can see in Google search box. Of course, it is only "seem-like" but not even close to it.

Datalist is like a "Select" dropdown list but user can freely input anything in the textbox other than what are listed in dropdown. As with <SELECT> dropdown everything is in client side.

Before we get into the code and demo, let's first check out which browser that is currently supporting it.

BrowsersDatalist Support
IE 10
Firefox 4
Safari 5
Chrome 20
Opera 11

Let's look into how to accomplish HTML5 Datalist. Pretty simple!

<label for="country_name">Country : </label><input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
   <option value="Afghanistan">
   <option value="Albania">
   <option value="Algeria">
   <option value="Andorra">
   <option value="Angola">
</datalist>

Feel free to try the Datalist demo! Just enter your country name.

If you do not have the browser that support it, here is how it looks like in Firefox 4.

Datalist