Make an Autocomplete Dropdown with datalist in HTML5

In HTML5, the datalist tag lets us create a quick drop down with options that we can pick from as we type them with a few lines of code.

To use it, we can write the following HTML:

<form>
  <input list="fruits" name="fruit">
  <datalist id="fruits">
    <option value="apple"></option>
    <option value="orange"></option>
    <option value="grape"></option>
    <option value="banana"></option>
    <option value="pear"></option>
  </datalist>
  <input type="submit">
</form>

All we have to do is add the datalist tag with the id which matches the value of the list attribute in the input we want our datalist element to show.

So both the list attribute of input and the id attribute of datalist have to have fruits as the value.

Then inside it, we just add the option tags with value attributes value which will show in when we type or click on the input.

That’s all we need to do to add a datalist element in HTML5.