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">
    <option>Spain</option>
    <option>England</option>
    <option>Argentina</option>
    <option>Germany</option>
    <option>Brasil</option>
  </datalist>

Browser support

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