The "datalist" Tag in HTML5

The <datalist> tag is used with the input field for providing a list of suggestions or autocompletes property. A user can select a value from the list of values or can input their own value. Now we use the <datalist> tag in our application. We write the following code:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. City
  5. <input list="city" type="text" />
  6. <datalist id="city">
  7. <option value="Varanasi">
  8. <option value="Jhansi">
  9. <option value="Delhi">
  10. <option value="Gurgaon">
  11. </datalist>
  12. </body>
  13. </html>
Now we run the code. The output will look like below:
datalist tag in html5
Now we enter the city name. Here we note that when we press v (Button v) to write Varanasi as city name, then a drop-down list is displayed with Varanasi as an option. This happens with all four city names which are defined as an option for the list. Suppose, I want to write Varanasi as city name, Then the output will look like the below figure:
datalist tag in html5