Native HTML5 autocomplete with datalist

Using 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.

HTML

<input list="pasta" autocomplete=off>

<datalist id="pasta">
<option>Bavette</option>
<option>Cannelloni</option>
<option>Fiorentine</option>
<option>Gnocchi</option>
<option>Pappardelle</option>
<option>Penne lisce</option>
<option>Pici</option>
<option>Rigatoni</option>
<option>Spaghetti</option>
<option>Tagliatelle</option>
</datalist>

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.

The datalist element and input list attribute are supported in Chrome 69+, IE11, Edge 16+, Firefox 4+, Safari 12.1+, iOS Safari 12.2+, Opera 15+ and all recent browsers.

Latest & featured

CSS Animated Pulse Buttons using Box Shadow. On-trend pulse buttons using CSS animations, keyframes and box-shadow.

Hacking CSS Writing Mode. While meant for multilingual purposes, the CSS writing-mode property can be exploited for design.

Change Background Image on Scroll. A cool change of the CSS background-image property with a few lines of JavaScript.

Tipue Search, a Site Search jQuery Plugin. Free, open source, responsive and fast. It doesn't need MySQL or similar.

Cool CSS Radio Buttons and Checkboxes. Hip and easy radio button and checkbox form elements styled with CSS.

The Complete Guide to Centering a Div. With a few CSS tricks, any div can be centered, horizontally and/or vertically.

Playing with CSS Sticky Positioning. The sticky element maintains its position only within its containing block.

Products / Grids / Blog
Twitter