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.
Choose a 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.
The browser's inbuilt autocomplete is switched off via the autocomplete attribute. Remove this and the browser's autocomplete is displayed below the HTML5 autocomplete suggestions.

Browser support

The datalist element and input list attribute are supported in Chrome 49+, IE11, Edge 16+, Firefox 58+ and Chrome for Android 53+. As yet, there's no support in Safari and iOS 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.

More from Tipue

Tipue Search, a jQuery Site Search Plugin

Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
More >

Cool CSS Radio Buttons and Checkboxes

Hip and easy radio button and checkbox form elements styled with CSS.

More >