Examples
Server-filtered search
Type to search infrastructure items. Results are fetched from /api/htmx/search and
swapped into the menu below the input.
Documentation
Live search props
Parameters accepted by
{#include components/htmx/live-search id="..." searchUrl="..." targetId="..." /}.
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — (required) |
Derives {id}-field on the input and
{id}-indicator for the HTMX spinner.
|
searchUrl
|
String (URL) | — (required) | Endpoint queried on each (debounced) keystroke; receives the input value and returns result markup. |
targetId
|
String | — (required) | Id of the element the results are swapped into. |
placeholder
|
String | — | Input placeholder text. |
Usage
The server filters; the browser renders nothing. Each debounced keystroke sends the query and the response replaces the target's contents wholesale — a PF menu list works well as the target since each result is a proper option row. Pair with search input markup for richer input chrome.