The HTML <datalist> element provides a list of pre-defined options for an <input> field. It enhances user experience by offering autocomplete suggestions as they type, but still allows them to enter values not in the list. This is great for forms and improving usability.

Example 1: Basic Datalist

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

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

Explanation This code creates an input field associated with a datalist of common browsers. As the user types, suggestions from the datalist will appear. The list attribute of the input is linked to the id of the datalist.

Example 2: Datalist with Pre-selected Value

<label for="country">Select your country:</label>
<input list="countries" id="country" name="country" value="United States">

<datalist id="countries">
  <option value="United States">
  <option value="Canada">
  <option value="Mexico">
  <option value="United Kingdom">
  <option value="Germany">
</datalist>

Explanation This example demonstrates how to set a default value in the input field while still offering datalist suggestions. The user sees "United States" initially but can still choose other options or type their own.

Example 3: Datalist with Numeric Input

<label for="quantity">Select quantity:</label>
<input type="number" list="quantities" id="quantity" name="quantity">

<datalist id="quantities">
  <option value="10">
  <option value="20">
  <option value="50">
  <option value="100">
</datalist>

Explanation Here, a type="number" input is combined with a datalist. This allows users to select from common numeric choices or input a custom number, providing flexibility for quantity selections.

Example 4: Datalist for Search Suggestions

<label for="search">Search for a product:</label>
<input type="search" list="products" id="search" name="search">

<datalist id="products">
  <option value="Laptop">
  <option value="Smartphone">
  <option value="Headphones">
  <option value="Smartwatch">
  <option value="Tablet">
</datalist>

Explanation This code illustrates using a datalist for search bar suggestions. As the user types in the search field, they'll see relevant product suggestions, improving search efficiency.

Example 5: Dynamic Datalist (Conceptual with JavaScript)

<label for="city">Enter your city:</label>
<input list="cities" id="city" name="city">
<datalist id="cities"></datalist>

<script>
  // JavaScript to populate datalist dynamically (e.g., from an API call)
  const citiesData = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
  const datalist = document.getElementById('cities');

  citiesData.forEach(city => {
    const option = document.createElement('option');
    option.value = city;
    datalist.appendChild(option);
  });
</script>

Explanation While the datalist itself is static HTML, this example conceptually shows how you might populate it dynamically using JavaScript. This is useful for fetching suggestions from a database or API, providing real-time, context-aware options.