HTML

Datalist — Autocomplete Suggestions

admin by @admin ADMIN
Jun 16, 2026
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
`<datalist>` attaches type-ahead suggestions to any text input. The user can still type something custom — it's suggestions, not a hard constraint.
HTML
Raw
<label for="country">Country</label>
<input type="text" id="country" name="country" list="country-list"
       autocomplete="country-name" placeholder="Start typing…">

<datalist id="country-list">
    <option value="United States">
    <option value="United Kingdom">
    <option value="Germany">
    <option value="Japan">
    <option value="Brazil">
    <!-- ... 200+ more ... -->
</datalist>

<!-- Also works on number, email, url, search, tel, time, week, month -->
<label for="qty">Quantity</label>
<input type="number" id="qty" name="qty" list="qty-suggestions" min="1" max="100">
<datalist id="qty-suggestions">
    <option value="1">
    <option value="5">
    <option value="10">
    <option value="25">
    <option value="50">
    <option value="100">
</datalist>
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.