Native HTML5 autocomplete with datalist

This article shows how with the HTML5 datalist element and input list attribute you can easily set up an input box with a custom autocomplete without jQuery, JavaScript or similar.
Example, pasta

How it works

Add the list attribute to an input field and then create a datalist element. The list value should be the same as the datalist id selector.
HTML

Browser compatibility

The datalist element and input list attribute are supported in Chrome 49+, IE11, Microsoft Edge, Firefox 47+, Opera 40+, Android browser 4.4.4+ and Chrome for Android 53+. As yet, there's no support in Safari, but input boxes with the list attribute work as standard and datalist is ignored.

There is a minor bug in Chrome where long lists of options are unscrollable, resulting in unselectable items. So be aware, and test.

Share  

Read more on Tipue