Tipue London
Home

Products

Blog

Support

About
Close

Native HTML5 autocomplete with datalist

Autocomplete sans JavaScript, jQuery or similar

Native HTML5 autocomplete with datalist

Feb 27, 2015. Revised Nov 24, 2016
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.

© 2017, Tipue. Made in London.
Privacy  T&Cs