2020-11-27-html-input-datalist.md

layout	title	date	excerpt	categories
post	HTML input and datalist	2020-11-27 11:39:18 -0800	Use HTML datalist to provide autocomplete options for input element.	html input 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:

<script async src="https://jsfiddle.net/remarkablemark/nya308kc/embed/result,html/"></script>

[To get the input value]({% post_url 2020/2020-10-20-textarea-value-change %}) in JavaScript, listen for the input or change event:

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