Components
Autocomplete
Autocomplete
Type-ahead pickers powered by Alpine-AJAX, with server-rendered HTML results and
data-result / data-kb-active
for keyboard navigation. Four shapes cover almost every picker in the Portal.
Canonical
12 Elm Avenue
Salford, M5 4AB
Elmwood Court
Manchester, M1 7HZ
Standard shape: input + dropdown. First row keyboard-highlighted, server returns rows with data-result.
Variants
4 variants12 Elm Avenue, Salford
12 Elmwood Court, Manchester
Address lookup
POST + partial swap. Three states: search, select, summary.
SJ
Sarah Johnson
Search people…
Person autocomplete
Multi-select chips inside the input container.
Manchester City Centre
Search branches…
Branch autocomplete
Client-side filtering — data loaded upfront as JSON.
Reapit
CRM select
Canonical CRM list via
<koala-select-enum for="Input.Crm">.States
3 statesClosed
No query yet, dropdown hidden.
12 Elm Avenue
Elmwood Court
Open with results
First row keyboard-highlighted.
No results.
No matches
Single italic line.
Conventions
6 conventions| Convention | Notes |
|---|---|
| 300 ms debounce | Standard delay before firing the server request. |
| data-result | Marker on each row so keyboard nav can find them. |
| data-kb-active | Highlight on the currently focused row. |
| excludeIds | Comma-separated IDs the server should drop (multi-select). |
| Drop-up | When viewport below the input is < 280 px, dropdown opens upward. |
| click.outside | Closes the dropdown on any external click. |
Working examples
Address lookup · live partial
Person autocomplete · live partial
No people found
Do & don't
12 Elm Avenue, Salford
Elmwood Court, Manchester
Do
300 ms debounce, server-rendered HTML results,
data-result on every row.
Don't
Don't use native
<select> for long lists. Use an autocomplete instead.