The datalist element may be used to predefine a list of options for a pre-defined input element.

This element offers a possibility of integrated auto-complete (not browser driven) feature that simulates a search box. The main difference between a regular search box and this one is that with a datalist we are responsible to suggest possible answers to a user while he or she is inputting a text into a field.

This is a very useful feature that offers fast responses to users and may be very handy in long lists of countries or a similar application. Instead of scanning through entire list, the input field will suggest an item that starts with the letter we just pressed.


<input list="datalist" />

<datalist id="datalist"><options></datalist>


NOTE: To link an input element with a datalist one, the list attribute of the input element must match the di attribute of the datalist element.


The example with datalist element and input fields:


›› go to examples ››