A Comprehensive Guide to Using the HTML <datalist> Element

Published: at 08:00 AM

As developers, building user-friendly interfaces often requires finding ways to enhance the user experience. One such enhancement is the ability to offer input suggestions while users type, which can save time and reduce input errors. This is where the HTML <datalist> element comes in.

In this article, we will explore what the <datalist> element is, how it works, and various use cases, including autocomplete functionality with highlighting. Along the way, we’ll cover some code examples and best practices to help you implement this feature in your projects.

What Is the <datalist> Element?

The <datalist> element in HTML is used to provide a list of predefined options for an <input> element. These options appear as suggestions as the user types in the input field. Unlike a <select> dropdown, which forces the user to choose from the available options, a <datalist> allows users to either select from the provided list or input their own value.

Syntax of <datalist>

<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Edge"></option>
  <option value="Safari"></option>
  <option value="Opera"></option>
</datalist>

Key Points

Browser Support

As of today, the <datalist> element is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, keep in mind that older versions of Internet Explorer (such as IE 11 and below) do not support this element.

Basic Use Cases for <datalist>

1. Enhancing Form Inputs

One of the most common uses of <datalist> is in enhancing form inputs with autocompletion. By providing a list of suggestions, users can select pre-filled options rather than typing out values manually.

Here’s a basic example where users are asked to input their favorite programming language:

<label for="language">Favorite programming language:</label>
<input list="languages" id="language" name="language" />
<datalist id="languages">
  <option value="JavaScript"></option>
  <option value="Python"></option>
  <option value="Java"></option>
  <option value="Ruby"></option>
  <option value="C++"></option>
</datalist>

In this example, the user can either select a language from the list or input a different value.

2. Predefined Data with Flexibility

Suppose you’re building a search form for a travel website where users can search for destinations. Instead of limiting them to a strict list of cities, you can provide suggestions while still allowing them to enter custom values.

<label for="destination">Enter destination:</label>
<input list="destinations" id="destination" name="destination" />
<datalist id="destinations">
  <option value="New York"></option>
  <option value="London"></option>
  <option value="Paris"></option>
  <option value="Tokyo"></option>
  <option value="Sydney"></option>
</datalist>

This setup gives users flexibility by allowing custom input while still offering suggestions to streamline the process.

Adding Autocomplete and Highlighting

Autocomplete is a powerful feature of the <datalist>. However, the default behavior provided by browsers does not include any visual highlighting of matched terms, which can further improve usability. For this, we can implement custom autocomplete logic and integrate JavaScript to highlight matching terms.

Highlighting Matches with Custom JavaScript

Let’s enhance the basic <datalist> behavior by adding JavaScript to highlight the matching part of the suggestion as the user types.

Example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Datalist Autocomplete with Highlight</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <label for="fruit">Choose a fruit:</label>
    <input type="text" id="fruit" oninput="filterOptions()" />
    <ul id="suggestions" style="list-style-type:none;"></ul>

    <script>
      const options = [
        "Apple",
        "Banana",
        "Orange",
        "Grapes",
        "Watermelon",
        "Pineapple",
      ];

      function filterOptions() {
        const input = document.getElementById("fruit").value;
        const suggestions = document.getElementById("suggestions");

        // Clear previous suggestions
        suggestions.innerHTML = "";

        options.forEach(option => {
          if (option.toLowerCase().includes(input.toLowerCase())) {
            const highlightedOption = option.replace(
              new RegExp(input, "gi"),
              match => `<span class="highlight">${match}</span>`
            );
            const li = document.createElement("li");
            li.innerHTML = highlightedOption;
            suggestions.appendChild(li);
          }
        });
      }
    </script>
  </body>
</html>

Explanation

Use Case: Autocomplete with Dynamic Data

In some applications, you may want to fetch suggestions from an external data source, such as an API, based on user input. Here’s how you can combine the <datalist> with JavaScript to load dynamic data.

Dynamic Autocomplete Example

<label for="country">Choose a country:</label>
<input
  list="country-list"
  id="country"
  name="country"
  oninput="fetchCountries(this.value)"
/>
<datalist id="country-list"></datalist>

<script>
  function fetchCountries(query) {
    const countryList = document.getElementById("country-list");
    countryList.innerHTML = "";

    if (query.length < 2) return; // Fetch only if input is more than 2 characters

    fetch(`https://restcountries.com/v3.1/name/${query}`)
      .then(response => response.json())
      .then(data => {
        data.forEach(country => {
          const option = document.createElement("option");
          option.value = country.name.common;
          countryList.appendChild(option);
        });
      })
      .catch(err => console.error("Error fetching countries:", err));
  }
</script>

How It Works

Best Practices for Using <datalist>

While the <datalist> element is simple to use, here are some best practices to ensure it enhances, rather than hinders, user experience:

  1. Performance Considerations: Avoid using very large datasets inside the <datalist>. If you need to display hundreds or thousands of options, consider loading the data dynamically as shown in the API example above.

  2. Accessibility: Make sure your <datalist> is accessible by properly associating it with a label using the for attribute. Screen readers should be able to interpret the form elements correctly.

  3. Fallback Handling: Since older browsers like Internet Explorer do not support <datalist>, provide a fallback. For instance, you could include a traditional <select> element for unsupported browsers or provide a JavaScript-based polyfill.

  4. Custom Styling: While the options in <datalist> cannot be styled directly (browser styles take precedence), you can customize the overall appearance of the input and dynamically generated suggestions (as shown in the autocomplete example with highlighting).

Conclusion

The HTML <datalist> element is a valuable tool for developers looking to enhance user experience through autocomplete functionality. It allows users to select from predefined options while retaining the flexibility to input their own values. Additionally, with some JavaScript, you can extend its functionality to include features like dynamic data loading and text highlighting.

To see this example in action and experiment with the code, you can visit the live demo on CodePen here.

By using <datalist>, you can create more interactive and efficient forms, improving the overall usability of your web applications. Make sure to test its implementation across different browsers and be mindful of performance and accessibility when dealing with large datasets.