cnc-search
A search box with a debounced input event, a clear control, and an optional
suggestion list it filters for you. The suggestions are a LOCAL list — the widget does no
fetching of its own.
Quick start
Bind $value and handle input for the debounced query, or
search
for the Enter key. Pass a suggestions array and the widget filters and shows it as
you type.
nothing yet
<cnc-search
placeholder="Search widgets..."
$value="q"
@input="runQuery($event.detail.value)"
$suggestions="['cnc-button', 'cnc-select', 'cnc-search']"
></cnc-search>Usage guidance
Hang your request on input, not on $value. The debounce exists so a
query fires once the user pauses rather than once per keystroke, and watching the bound value
directly throws that away — which on a remote search is the difference between one request
and one per character.
Suggestions are local, so the widget is doing autocomplete only over data you have ALREADY given
it. For a server-backed search, treat `suggestions` as a results cache you refill from the
`input` handler; for a fixed set of options that must be chosen from rather than typed over,
cnc-select
with searchable is the better control.
Handle clear separately from an empty input. Clearing usually means
restore the unfiltered view, and a handler that treats it as a search for the empty string will
often fire a pointless request for everything.