Create a native HTML5 autocomplete

Native autocomplete HTML5

I want to show how to create a native autocomplete list using HTML5 input list attribute and datalist element. Although it has not very nice support, it would be a nice alternative in the future.

How it works

You only have to add the list attribute to an input field, and create a datalist element. Its id must be the same as the list value of the input.

  <input list="countries">
  <datalist id="countries">

Browser support

Safari has no support for datalist element. For other browsers, the support is very well. Check the current support here.