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.

Syntax:

<input list="datalist" />

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

Attributes:

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.

Example

The example with datalist element and input fields:

​x
 
<html>
<head>
<style type="text/css">
P {margin: 10px 5px;}
</style>
</head>
<body>
​
<p>The drop-down list below is pre-defined with the &lt;datalist&gt; tag:</p>
<input list="subject" name="subject">
  <datalist id="subject">
    <option value="java">
    <option value="asp\.net">
    <option value="php">
    <option value="android">
    <option value="operating system">
  </datalist>   
​
</body>
</html>

 

›› go to examples ››