Datalist & Combobox Patterns

Use <datalist> to add native autocomplete suggestions to text inputs, range sliders, and color pickers without JavaScript.

Overview

The `<datalist>` element provides a list of predefined suggestions for an `<input>`, creating a native combobox a text field that also shows selectable options. It combines free text entry with suggestion hints, unlike `<select>` which only allows choosing from a fixed list. Connect a datalist to an input using a matching `id` on the datalist and `list` attribute on the input. The browser renders the suggestions in its native UI a dropdown appears as the user types, showing matching options from the datalist. The user can still type anything; the suggestions are hints, not constraints. Beyond text inputs, `<datalist>` also provides tick-mark suggestions for `range` inputs and swatch palettes for `color` inputs. This makes it a versatile tool for guided data entry.

Key Points

•Connect input to datalist with `list="datalist-id"` on the input and matching `id` on the datalist
•Users can still type anything datalist suggestions are non-binding hints, not validation constraints
•Filter suggestions by adding a `value` attribute to each `<option>`; display text differs from submitted value using both `value` and text content
•Works with type="text", "email", "url", "tel", "search", "number", "range", "color"
•Combine with `pattern` attribute to both suggest and validate format
•Dynamic datalists: update `<option>` children with JS for server-driven autocomplete
•The `<option>` label attribute shows display text while the value attribute is what gets filled into the input

Examples

Text input with static autocomplete suggestions

<label for="browser">Favourite browser:</label>
<input
  id="browser"
  type="text"
  list="browsers"
  placeholder="Start typing..."
  autocomplete="off"
/>

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

The browser shows matching options as the user types. They can still submit a value not in the list.

Datalist with label vs value (display text differs from submitted value)

<label for="country">Country:</label>
<input id="country" type="text" list="countries" name="country">

<datalist id="countries">
  <!-- value = what goes into the input; text content = display label -->
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
  <option value="FR">France</option>
  <option value="JP">Japan</option>
</datalist>

When both value and text content are present, browsers show "United States (US)" or just the value behavior varies by browser.

Dynamic datalist populated from a fetch call

<label for="city">City:</label>
<input
  id="city"
  type="text"
  list="city-options"
  oninput="fetchCities(this.value)"
/>
<datalist id="city-options"></datalist>

<script>
let debounceTimer;

async function fetchCities(query) {
  clearTimeout(debounceTimer);
  if (query.length < 2) return;

  debounceTimer = setTimeout(async () => {
    const res = await fetch(`/api/cities?q=${encodeURIComponent(query)}`);
    const cities = await res.json();

    const datalist = document.getElementById('city-options');
    datalist.innerHTML = cities
      .map(c => `<option value="${c.name}">${c.country}</option>`)
      .join('');
  }, 200);
}
</script>

Debounced fetch populates the datalist dynamically for server-side autocomplete.

Common Mistakes

Confusing <datalist> with <select> datalist allows free text entry; select restricts to listed options only
Using the same value for both `id` of datalist and `name` of the input the `list` attribute connects them, not `name`
Forgetting that datalist suggestions are case-insensitive partial matches in most browsers by default

Note

For a range input, add a datalist with option values matching tick positions on the slider. The browser renders visual tick marks at those values a built-in way to show significant intervals without any CSS.

Datalist & Combobox Patterns

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the key difference between <datalist> and <select>?