HTML <datalist> Element

Publish in HTML Tutorial el 23/05/2025 19:37

The <datalist> HTML element provides an "autocomplete" feature for <input> elements. It contains a set of <option> elements that represent predefined values for the input. Unlike <select>, users can still enter custom values while having suggestions available.

Key features:

Works with text, search, url, tel, email, date, and number input types
Provides dropdown suggestions while allowing free-form input
Improves user experience by reducing typing effort
Accessible by default with keyboard navigation

Basic Syntax

Here's how to define a basic datalist:

Rendered Example

Here's how the above code renders:

Play Code

<input list="browsers" placeholder="Choose or type...">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Examples

1. Basic Color Picker

A simple color suggestion list with common color names:

Play Code

<label for="color">Choose a color:</label>
<input list="colors" id="color" name="color">
<datalist id="colors">
  <option value="Red">
  <option value="Green">
  <option value="Blue">
  <option value="Yellow">
  <option value="Purple">
  <option value="Black">
  <option value="White">
</datalist>

2. Number Range with Steps

Using datalist to suggest number values with a specific step:

Play Code

<label for="quantity">Quantity (1-10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" list="quantities">
<datalist id="quantities">
  <option value="1">
  <option value="2">
  <option value="3">
  <option value="4">
  <option value="5">
  <option value="6">
  <option value="7">
  <option value="8">
  <option value="9">
  <option value="10">
</datalist>

3. Email Suggestions

Common email domain suggestions for user convenience:

Play Code

<label for="email">Email:</label>
<input type="email" id="email" name="email" list="email-domains">
<datalist id="email-domains">
  <option value="@gmail.com">
  <option value="@yahoo.com">
  <option value="@outlook.com">
  <option value="@hotmail.com">
  <option value="@icloud.com">
</datalist>

4. Dynamic Datalist with JavaScript

Populating a datalist dynamically based on user input:

Play Code

<input type="text" id="fruitInput" list="fruits" placeholder="Start typing...">
<datalist id="fruits"></datalist>

<script>
  const fruitInput = document.getElementById('fruitInput');
  const datalist = document.getElementById('fruits');
  
  const fruitOptions = ['Apple', 'Apricot', 'Avocado', 'Banana', 'Blueberry'];
  
  fruitInput.addEventListener('input', () => {
    datalist.innerHTML = '';
    const input = fruitInput.value.toLowerCase();
    
    if (input.length > 1) {
      fruitOptions.forEach(fruit => {
        if (fruit.toLowerCase().includes(input)) {
          const option = document.createElement('option');
          option.value = fruit;
          datalist.appendChild(option);
        }
      });
    }
  });
</script>

5. Fetching Options from API

Loading datalist options from an external API:

Play Code

<input type="text" id="countryInput" list="countries" placeholder="Search country...">
<datalist id="countries"></datalist>

<script>
  const countryInput = document.getElementById('countryInput');
  const countryList = document.getElementById('countries');
  
  countryInput.addEventListener('focus', async () => {
    try {
      const response = await fetch('https://restcountries.com/v3.1/all');
      const data = await response.json();
      
      countryList.innerHTML = '';
      data.forEach(country => {
        const option = document.createElement('option');
        option.value = country.name.common;
        countryList.appendChild(option);
      });
    } catch (error) {
      console.error('Error fetching countries:', error);
    }
  });
</script>

Tips and Tricks

Accessibility: Always pair your input with a proper <label> element for better accessibility.
Mobile Experience: Datalist works well on mobile devices, providing a native-like picker experience.
Fallback: For browsers that don't support datalist, consider adding JavaScript polyfills.
Performance: For large datasets, consider lazy-loading options or implementing server-side filtering.
Styling: While the dropdown itself can't be styled, you can style the input element to match your design.

Browser Support

The <datalist> element is supported in all modern browsers, including Chrome, Firefox, Edge, and Safari. However, some older browsers (like IE) may have limited or no support.