HTML `<datalist>` Element: Implementing Autocomplete for Input Fields

Learn how to enhance user input with the HTML `<datalist>` element, providing autocomplete functionality for `<input type="text">` fields. This tutorial explains its usage, demonstrates how to connect it to input fields, and highlights its benefits for improving user experience and data entry efficiency.

Understanding the HTML <datalist> Element

What is the <datalist> Element?

The HTML <datalist> element provides a list of pre-defined options for an input element, typically an <input type="text">. It acts as an autocomplete feature, helping users quickly select from a predefined set of values. The datalist isn't displayed directly; instead, it's used by the browser to suggest options as the user types into the associated input field.

Example:

<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

The list attribute in the <input> element must match the id attribute of the <datalist> element to connect them.

Browser Support

Support for the <datalist> element is good in modern browsers. Here's a summary of the first version of each browser to fully support it:

<datalist> Attributes

The <datalist> element supports standard global and event attributes.

Default CSS Styling

By default, the <datalist> element is not visible. It's only used by the browser to provide suggestions.

datalist {
  display: none;
}