Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PatternsMega search

Mega search

The workspace search in the top bar: a pill that expands into a results bubble, with keyboard navigation over whatever rows the caller's own GET form brings back.

<koala-mega-search>

The caller writes the form. Mark it koala-mega-search-box, point it at a results endpoint, and have it submit on koala-mega-search-query, which the box raises on focus and after a short pause in typing. The response morphs into the empty bubble named by results-id. Try “Sheffield” or “Priya”, then use the arrow keys and Enter.

Filter shorthands

A hidden select marked data-ws-filter-select lists the sources the query can be narrowed to. Each option's data-prefixes turns a typed shorthand into a removable filter token: type c: for clients or t: for transactions. Backspace at the start of the box removes the token again.

Result rows

The results partial owns its rows. Wrap them in an element carrying the results-id with x-merge="morph", give the list data-ws-list, add a data-ws-highlight element for the moving selection, and mark every row data-row so the arrow keys and Enter can find it. Rows use the shared koala-result-option styling, as the context switcher does.

API

placeholder string
aria-label string
results-id element id (default ws-results)
data-analytics analytics event prefix
koala-mega-search-box on the caller's GET form
koala-mega-search-query event the form listens for to re-run the query
data-ws-filter-select hidden select of sources; options carry data-prefixes and data-icon
data-ws-scope hidden input for a page-published scope
data-ws-scoped hidden input, truefalse