Adding Options to a Datalist with JavaScript

The HTML <datalist> element provides suggestions for an associated input. JavaScript can populate those suggestions from an array, API response, database result returned by the server, or any other data source.

<label for="month">Month</label>
<input id="month" name="month" list="months" autocomplete="off">
<datalist id="months"></datalist>

Populate a Datalist from an Array Top ↑

The original example built a string and assigned it with innerHTML. Creating option elements directly avoids HTML-string construction and is easier to extend.

const months = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

const monthList = document.getElementById("months");
for (const month of months) {
  const option = document.createElement("option");
  option.value = month;
  monthList.appendChild(option);
}

Count and Read Options Top ↑

const monthList = document.getElementById("months");
console.log(monthList.options.length); // 12
console.log(monthList.options[5].value); // June

Validate a Submitted Value Top ↑

A datalist suggests values but does not force the visitor to select one of them. If only listed values are valid, check the submitted value explicitly.

<form id="fruit-form">
  <label for="fruit-input">Fruit</label>
  <input list="fruits" name="fruit" id="fruit-input">
  <datalist id="fruits">
    <option value="Apple"></option>
    <option value="Banana"></option>
    <option value="Orange"></option>
  </datalist>
  <button type="submit">Submit</button>
</form>
<p id="fruit-result" aria-live="polite"></p>
<script>
const allowedFruits = ["Apple", "Banana", "Orange"];
const form = document.getElementById("fruit-form");
const result = document.getElementById("fruit-result");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const selectedFruit = document.getElementById("fruit-input").value;
  result.textContent = allowedFruits.includes(selectedFruit)
    ? `Valid fruit: ${selectedFruit}`
    : "Choose a fruit from the suggestions.";
});
</script>

Respond to Input Changes Top ↑

const monthInput = document.getElementById("month");
monthInput.addEventListener("change", () => {
  console.log(`Selected or typed: ${monthInput.value}`);
});

Options from a Database Top ↑

The browser does not connect directly to MySQL. A server endpoint can return values, which JavaScript then inserts into the datalist. See populate datalist options using PHP and Ajax.

Questions to Review Top ↑

← JavaScript Validation Validation of dropdown Listbox →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: