Datalist Suggestions

An input points at a datalist so the browser can offer suggestions while still allowing custom typed values.

Program

datalist adds native suggestions to text-like inputs. The user can pick one suggestion or keep typing another value.

datalist_suggestions.html

Visuals: captured from real browser rendering

<label for="city">City</label>
<input id="city" name="city" list="cities" value="Austin">
<datalist id="cities">
  <option value="Austin">
  <option value="Boston">
  <option value="Chicago">
</datalist>

Link the label to the input.
The label gives the city input its visible name.
Attach suggestions to the input.
The input now knows where to read suggestions.
Create the suggestion list.
The datalist is not shown as a normal list; it feeds the input popup.
Add the first suggestion.
Austin appears as a native suggestion and also matches the current value.
Add more suggestions.
The user gets a short set of city completions.

list attribute The list attribute points an input at a datalist id.

datalist datalist supplies native suggestions without forcing a fixed choice.