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.
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.