HTML input and datalist

Given <input> element:

<input type="text" />

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

<datalist>
  <option value="" />
</datalist>

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" />
</datalist>

See JSFiddle:

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

document.querySelector('input').addEventListener('input', function (event) {
  console.log(event.target.value);
});