<datalist> looks like a nifty HTML5 element, but I’ve hardly heard about it and can’t remember seeing it used much, neither as a coder or as a citizen of the internet. Why is that?

<label for="trip">Select a city to visit:</label>
<input list="city-suggestions" id="trip" name="trip" />
<datalist id="city-suggestions">
  <option value="Taipei"></option>
  <option value="Tokyo"></option>
  <option value="Trondheim"></option>
</datalist>

Yay! Browser native autocomplete functionality from list of suggested cities. But I can also type something else that is not presented as an option. Compared to a classic <select> the full list of options are hidden from me, so it’s only a useful pattern if I already know the options. If the list is super long, it can even be extra helpful to not be presented with the entire list of options.

For me as a user, choosing a country would be easier with a <datalist>.

But… as a developer, that means you need to handle typos and pranks and geopolitical disputes. Not great for logistics systems or anything that requires exact data as input. There are probably interesting use cases that have a higher tolerance though, when grouping some outliers as “miscellaneous countries” are perfectly acceptable. Perhaps if exceptions can be handled manually. Or in a survey, where making a form easy to complete is a priority over accuracy.

Browser support? There’s a lot of light green on caniuse.com for partial support, but looks like the bugs are pretty specific cases, so worth looking into their relevance. There’s also a vanilla JS polyfill that can help. Always fond of the concept of polyfills that can be removed in the future.

The HTML <datalist> element contains a set of <option> elements that represent the values available for other controls. –MDN web docs

Other controls? 🤔 So not only for text inputs, but also things like range or select. Whoa! Jeremy Keith wrote The design of datalist way back in 2011 that mentions the technique of using the same option elements for the select and the datalist.

Definitely want to dig into this some more another day. 💙 HTML 💙