TIL using datalist for a pure HTML input suggestion

POSTED ON: May 01, 2022

TAGS: html input mdn

Web developers do not use the power of datalists enough.

It combines the power of a selector, with the ability to type out your choice using the keyboard.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Best of all, this is native! No JS to auto-complete!

How-To:
You bind the input and the datalist together.

Via the MDN

You can even bind colors!

<input type="color" list="redColors">
<datalist id="redColors">
  <option value="#800000">
  <option value="#8B0000">
  <option value="#A52A2A">
  <option value="#DC143C">
</datalist>

via 5 HTML Tricks Nobody is Talking About

Related TILs

Tagged: html

• Next: TIL how to make numbers the same width and prevent shifting layoutIf your font supports it, you can use 'font-variant-numeric: tabular-nums'.
• Previous: TIL about the element.closest() methodUsing a single event listener is super efficient, but has edge-cases. So using closest instead of match.