HTML input and datalist

Given <input> element:

<input type="text" />

The <datalist> element provides autocomplete options via the <option> element:

  <option value="" />

Here’s an example of selecting a range of colors:

<label>Choose color: <input list="colors" /></label>

<datalist id="colors">
  <option value="Red" />
  <option value="Green" />
  <option value="Blue" />

See JSFiddle:

To get the input value in JavaScript, listen for the input or change event:

document.querySelector('input').addEventListener('input', function (event) {

Please support this site and join our Discord!