Search input
A search input whose model updates are debounced by 250 ms.
The server filters a list of Suprnova subsystems as you type.
Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.
Installation
suprnova live:add search-inputUsage
{% import "suprnova-ui/search-input/search-input.html" as search_input %}
{% call search_input::search_input("query", value=query) %}{% endcall %}Examples
Result count
The server reports how many subsystems match.
Keyboard and accessibility
suprnova.search-input - a search input whose model binding is debounced (FORM-003): the server sees a settled query, not every keystroke. value is the island's current query (FORM-009), and authority marks a server correction (Live spec 12).
API reference
search_input
| Parameter | Default | Description |
|---|---|---|
name | Required | The model field. Its updates are debounced by 250 ms, so declare it `#[model(debounce = 250)]`. |
placeholder | "Search" | Placeholder text. |
value | "" | The island's current value of the field, so the control shows it. |
authority | "" | A correction sequence. When set, this render replaces the visitor's unsent edit. |