Editable Dropdown (Datalist)

The best of both worlds. Give users suggested options without restricting them. This script uses the HTML5 `datalist` to create an editable dropdown menu.

Copy the Script

<!-- Input linked to datalist -->
<input list="flavors" name="ice_cream" placeholder="Select or Type...">

<!-- The List -->
<datalist id="flavors">
  <option value="Chocolate">
  <option value="Vanilla">
  <option value="Strawberry">
</datalist>

Frequently Asked Questions

The `` tag is pure HTML5. However, older browsers required complex JavaScript to simulate this. We use the modern HTML5 method here as it is mobile-friendly.

Yes. You can use JavaScript to check if `input.value` exists in the options array. If not, you know the user typed a custom value.

Yes, `datalist` provides native autocomplete functionality based on what the user types.