the datalist element

2024-10-07 01:00

i learned from reading jeremy keith’s blog that html now has a built-in combobox component. for most use-cases, it is supported by all browsers, including safari. (try it on your iphone, if you have one, and note the keyboard suggestions!)

here is an example of a datalist (modified from MDN):

Folder:

source

<label for="folder-choice">Folder:</label>
<input list="folder" id="folder-choice" name="folder-choice" />

<datalist id="folder">
    <option value="/bin"></option>
    <option value="/boot"></option>
    <option value="/dev"></option>
    <option value="/etc"></option>
    <option value="/home"></option>
    <option value="/lib"></option>
    <option value="/media"></option>
    <option value="/mnt"></option>
    <option value="/opt"></option>
    <option value="/proc"></option>
    <option value="/root"></option>
    <option value="/sbin"></option>
    <option value="/srv"></option>
    <option value="/sys"></option>
    <option value="/tmp"></option>
    <option value="/usr"></option>
    <option value="/var"></option>
</datalist>