Autocomplete

Basic

Reach for Autocomplete when users type their own value and you want to help them along with suggestions. Picking a suggestion replaces the typed text with the chosen value. Single value only. For a non-typeable picker, use Select. For multi-select with chips, use Combobox. The default authoring style is an <input> with list="…" referencing a <datalist>. Without JS the browser shows its native datalist UI; with JS, the native UI is suppressed and a styled popup takes over.

Keyboard

The input behaves like a typing field with suggestions layered on top.

• ArrowDown: open the popup or move highlight down
• ArrowUp: move highlight up
• Enter: pick the highlighted suggestion
• Escape: close the popup, keep the typed text
• Tab: close and move focus to the next field

From inline JSON

For dynamic option sets, drop a JSON array on data-options. Each entry is either a string (value = label) or an object with value and label.

Minimum length

Set data-stisla-autocomplete-min-length to wait for a few characters before showing suggestions. Useful for long lists where typing a single letter would dump dozens of rows.

Sizes

.autocomplete--sm and .autocomplete--lg retune height, padding, radius, and type around the default.

Disabled

Add disabled to block interaction and dim the field. The popup won't open.

Invalid

Set aria-invalid="true" on the input. The field shape inherits the form-field invalid handling, so the border paints red.

Events

Listen for stisla:autocomplete:select to react when the user picks a suggestion. The input's native input and change events fire too, so existing form code keeps working.

Customization

These variables retune the autocomplete. The field shares the form-field knobs; the popup adds its own.