HTML Datalist Element

03-08-2019

---

Making sortable input lists on a webpage usually requires a ton of javascript. The <datalist> element was introduced with HTML5 and aims to solve this exact problem.

Using "datalist"

Using the datalist element is fairly straight forward. Simply define the search input: <input list="list-name" name="list-name">. The keyword here, is the list attribute, which links the list to the input.

Next to the input element create a <datalist id="list-name"> with <option> elements inside, defining each selectable item.

Example

<form action="/action_page.php" method="get">
 <input list="flavours" name="flavours" />
 <datalist id="flavours">
  <option value="Chocolate"></option>
  <option value="Vanilla"></option>
  <option value="Grape"></option>
  <option value="Strawberry"></option>
  <option value="Honey"></option>
  <option value="Coconut"></option>
  <option value="Cherry"></option>
 </datalist>

 <input type="submit" />
</form>

Styling "datalist"

The styling capabilities are, unfortunately, very limited. The input box itself, can of course be styled to your preference. But the dropdown is entirely dependent on the browser's styles. One thing you can control though, is the dropdown-arrow. It can be selected like so

input[list]::-webkit-calendar-picker-indicator {
 background: red;
 color: white;
}

Live Example

See the Pen Datalist Example by Tristan White (@triss90) on CodePen.

Browser Support

As with other "new" HTML5 elements, browser support is somewhat lacking.

Method of setting a list of options for a user to select in a text field, while leaving the ability to enter a custom value.

So if you want to use this in production, you may want to include a polyfill, like this one by Maximilian Franzke