Native autocomplete without JavaScript
Building autocomplete used to mean pulling in a library like Typeahead or Awesomplete and wiring up event listeners. The datalist element gives browsers native autocomplete with zero JavaScript.
2<datalist id="countries">
3 <option>Afghanistan</option>
4 <option>Albania</option>
5</datalist>
2import Awesomplete from 'awesomplete';
3new Awesomplete(document.querySelector('#country'), {
4 list: ['Afghanistan', 'Albania', 'Algeria', ...]
5});
6/* Plus custom CSS for the dropdown */
Browser Support for Datalist
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Zero JavaScript
No library, no event listeners, no custom dropdown. Link an input to a datalist with the list attribute and the browser does the rest.
Free-text allowed
Unlike a select, datalist lets users type anything. The suggestions are hints, not restrictions. Useful for search fields and open-ended inputs.
Works on any input type
datalist works on text, email, url, search, tel, and number inputs. It also adds tick marks to range inputs and swatches to color inputs.
How it works
The <datalist> element holds a list of <option> elements. Connect it to an input by matching the input's list attribute to the datalist's id. The browser shows matching suggestions as the user types and filters them automatically.
Options use the text content format: <option>Value</option>, not the value attribute. The browser renders the dropdown in its native UI. That means the position, size, and styling of the suggestion list is entirely browser-controlled and varies by OS. The input itself can be styled normally, but the dropdown cannot.
Unlike <select>, the user can type any value — the datalist is suggestive, not restrictive. This makes it good for search fields, tagging inputs, and anywhere you want to guide input without forcing a specific choice.