DataList Tag in HTML 5

Introduction

 
A <datalist> tag can be used to create a simple auto-complete feature for a webpage.   
 
<datalist> is the newly defined HTML tag that came with the HTML 5 specification. By using this <datalist> tag we can define a list of data and then we can bind it with a <input> tag.  
 
A <datalist> tag specifies a list of predefined options for an <input> element. After binding it the user will see a drop-down list in which all the predefined options will be there for the input. When the user types a character or string then the user will automatically get the data depending on the input string or character.  
 
The main feature of this <datalist> tag is to auto-complete the <input> element.  
 
Example  
 
Suppose we have a TextBox for the country.
 
<input type="text" list="countries" name="country" />  
 
In the preceding input element, we are using the list attribute and we are passing the list of countries. so we will define a list of countries using the <datalist> tag as given below:
  1. <option value="India">India</option>      
  2. <option value="United States"></option>      
  3. <option value="United Kingdom"></option>      
  4. <option value="China"></option>      
  5. <option value="Nepal"></option>      
  6. <option value="Afghanistan"></option>      
  7. <option value="Iceland"></option>      
  8. <option value="Indonesia"></option>      
  9. <option value="Iraq"></option>      
  10. <option value="Ireland"></option>      
  11. <option value="Israel"></option>      
  12. <option value="Italy"></option>      
  13. <option value="Swaziland"></option>     
Complete Example
  1. <!DOCTYPE html>      
  2. <html lang="en">      
  3.     <body>      
  4.         Please Select Country: <input type="text" list="countries" name="country" />      
  5.         <datalist id="countries">      
  6.             <option value="India">India</option>      
  7.             <option value="United States"></option>      
  8.             <option value="United Kingdom"></option>      
  9.             <option value="China"></option>      
  10.             <option value="Nepal"></option>      
  11.             <option value="Afghanistan"></option>      
  12.             <option value="Iceland"></option>      
  13.             <option value="Indonesia"></option>      
  14.             <option value="Iraq"></option>      
  15.             <option value="Ireland"></option>      
  16.             <option value="Israel"></option>      
  17.             <option value="Italy"></option>      
  18.             <option value="Swaziland"></option>      
  19.         </datalist>      
  20.     </body>      
  21. </html>    
Output  
 
The output of the code above is given below:
  1. When the page is loaded it will initially look like:
     
    page load initially
     
  2. When a character or string is typed into the input element then:
     
    input element
     
Browser Compatibility  
 
The following are the browser versions that fully supports <datalist>:
 
Browser Compatibility
 

Conclusion

 
In this article, we studied DataList Tag in HTML 5