Member-only story
HTML Datalist Element
Level up with an advanced HTML element to help you create options lists for text inputs
The datalist element allows you to provide simple autocomplete functionality to your text inputs for a form. The element can also be used with Javascript to dynamically load content for the dropdown from a remote API endpoint. The one major drawback to using this method versus a completely custom autocomplete component is that the datalist generated options have almost no flexibility in styling, so what you see is what you get.
Generates the following output:
Make the list dynamic
To make the list dynamic you are able to use JS to fetch content from an endpoint like so:
The advantage of using a HTML element instead of a custom component are many, among them less development time, smaller code size, better browser support and near flawless accessibility out of the box.
That’s all for now, thanks for reading.
Sources:
