Tipue London




Native HTML5 autocomplete with datalist

Autocomplete sans JavaScript, jQuery or similar

Native HTML5 autocomplete with datalist

First published 27th Feb, 2015. Updated 24th Nov, 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.

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.

Also by Tipue
Tipue Search
Tipue Search
Tipue Search is a site search engine jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
© 2017, Tipue. Made in London.
Privacy  T&Cs