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 `
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.