datalist

Learn how to attach autocomplete suggestions to a text input using the HTML datalist element, allowing users to select from predefined options or type their own.

What it is

The datalist element provides an "autocomplete" feature for input elements. It contains a set of option elements that represent suggested values. Unlike a standard select dropdown, a datalist allows the user to enter any value, not just those listed. The browser displays suggestions as the user types, filtering them based on the current input. Related terms include "suggestions," "autocomplete," and "combobox."

Why it matters

• Flexibility: Users can choose from common options or enter unique data (e.g., typing a city name not in the list).
• Efficiency: Reduces typing effort by offering quick selections for frequent inputs.
• Simplicity: Requires no JavaScript; it is native HTML behavior supported by all modern browsers.
• Accessibility: Screen readers announce available suggestions when the input receives focus.

Syntax or steps

1. Create an input element with a list attribute. 2. The value of the list attribute must match the id of a datalist element. 3. Inside the datalist, add option elements with value attributes containing the suggestions.

Example

<form>
  <label for="browser">Choose your preferred browser:</label>
  <input list="browsers" id="browser" name="browser" />

  <datalist id="browsers">
    <option value="Chrome"></option>
    <option value="Firefox"></option>
    <option value="Safari"></option>
    <option value="Edge"></option>
    <option value="Opera"></option>
  </datalist>
</form>

Explanation: The input has list="browsers". The datalist has id="browsers". When the user clicks the input or starts typing, the browser shows matching options from the datalist. If the user types "Ch", only "Chrome" appears. If they type "Brave", no suggestions appear, but the form still accepts "Brave" as valid input.

Common mistakes

• Mismatched IDs: The list attribute on the input does not exactly match the id on the datalist. Ensure case sensitivity matches.
• Using select instead: Developers often use select when free-text entry is needed. Use datalist only when custom entries are allowed.
• Missing labels: Always associate a label with the input for accessibility. Do not rely solely on placeholder text.
• Assuming strict validation: Browsers do not enforce that the input value exists in the datalist unless you add JavaScript validation or use specific constraints.

When to use it

Compare datalist with select to choose the right tool:

Feature	select	datalist
User Input	Restricted to options	Free text + suggestions
UI Style	Dropdown menu	Text box with autocomplete
Best For	Countries, Yes/No, Categories	Search tags, Product names, Cities

Use select when choices are limited and fixed. Use datalist when users might need to enter values not in the list.

Practice

Guided Exercise: Create a form field for "Favorite Fruit" with suggestions: Apple, Banana, Orange, Grape. Allow the user to type "Mango" even though it is not in the list.
Challenge: Add a second input for "Quantity" with a datalist suggesting common amounts: 1, 5, 10, 20. Verify that typing "7" is accepted.
Hint: Ensure each input has a unique id and corresponding datalist id.

Quick check

Question: Can a user submit a form with a datalist input if their typed value is not in the suggestion list?
Answer: Yes. The datalist only provides suggestions; it does not restrict input values unless additional JavaScript validation is applied.

Summary

The datalist element enhances user experience by providing autocomplete suggestions while maintaining the flexibility of free-text input. It is ideal for scenarios where common values exist but unique entries are also possible, bridging the gap between rigid dropdowns and open text fields.