Datalists

Where elements accept text input—such as text, url, or search—you can provide a list of helpful suggestions to the user. The browser can offer these based on the user’s previous input (controlled by the previously mentioned autocomplete attribute), but at times you may want to suggest a range of predefined terms. Implement this latter option with the datalist element.

The datalist element contains a list of suggestions, each of which is contained in an option child element (which you should be familiar with from the select element in HTML 4.01). To illustrate what I mean, here’s a short datalist with only a few options:

<datalist id="apes"> <option>Chimpanzee</option> <option>Gorilla, Eastern</option> <option>Gorilla, Western</option> ...

Get The Modern Web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.