Search Input

A Search Input is a text box for search queries. It shows a search icon, a clear button, and a label for screen readers. It can wait until the user stops typing before it reports the query, so you do not run a search on every keystroke.

Usage

<SearchInput model="$term" (search)="onSearch" placeholder="Search fruits" hint="Press Escape to clear." />
<p class="text-muted small mt-2">Searches run: {$searchCount}</p>
<ul class="list-group">
    <li foreach="$results as $fruit" class="list-group-item">$fruit</li>
</ul>

<?php

class SearchInputDocsExample extends BaseComponent
{
    public array $fruits = [
        'Apple',
        'Apricot',
        'Banana',
        // ...
    ];
    public array $results = [];
    public string $term = '';
    public int $searchCount = 0;

    public function init()
    {
        $this->results = $this->fruits;
    }

    public function onSearch(string $query)
    {
        $this->searchCount = $this->searchCount + 1;
        $needle = strtolower($query);
        $found = [];
        foreach ($this->fruits as $fruit) {
            if ($needle === '' || strpos(strtolower($fruit), $needle) !== false) {
                $found[] = $fruit;
            }
        }
        $this->results = $found;
    }
}

Type a few letters quickly and watch the counter. The model follows every keystroke, while (search) fires once typing pauses.

Debounce

debounce sets how many milliseconds (search) waits after the last change. The default is 300. Use 0 to emit (search) on every change:

<SearchInput model="$term" (search)="onSearch" debounce="0" />

A longer delay suits searches that call the server:

<SearchInput model="$term" (search)="loadPage" debounce="500" />

Clearing

The clear button appears when the box is not empty. Clicking it, or pressing Escape in the box, empties the box and returns the focus to it. Clearing emits (search) with an empty string right away, without waiting for the debounce.

If the parent changes the bound model (for example, a "Reset filters" button sets it to ''), the box shows the new value. This does not emit (search), so run the search yourself if you need to.

Label

A search box needs an accessible name, so the component always renders a label. It is visually hidden. The default text is Search; set label to describe what the user searches:

<SearchInput label="Search orders" placeholder="Order number or customer" model="$term" (search)="onSearch" />

If you do not set id, the component generates one to link the label and the input.

Properties

model - (optional), two-way data binding. Updates on every keystroke.

debounce - (optional), milliseconds to wait after the last change before (search) fires. 0 fires on every change. Default: 300.

placeholder - (optional), placeholder of the input. Default: Search.

label - (optional), visually hidden label for screen readers. Default: Search.

hint - (optional), hint text shown under the input.

id - (optional), id attribute of the input. Default: generated.

inputClass - (optional), additional classes for the input. Default: `` (empty).

Events

(search) - event that happens when typing pauses for debounce milliseconds, and right away when the box is cleared. Receives the search text.

(model) - event that happens on every change. Receives the search text. model="$prop" binds to it for you.