Filter#

Filter a list of items by typing. Items that do not match the query are hidden.

Source: Filter.js

<div filter-space>
    <input filter-query type="text" oninput="Filter.Filter(this)">
    <ul>
        <li filter-item="apple fruit">Apple</li>
        <li filter-item="banana fruit">Banana</li>
        <li filter-item="cherry fruit">Cherry</li>
        <li filter-item="carrot vegetable">Carrot</li>
        <li filter-item="potato vegetable">Potato</li>
    </ul>
</div>

The input is marked with filter-query. The handler goes up to the space and reads that element, so it never assumes it was called from the input itself. The trigger can be on the input, on a button next to it, or anywhere inside the space.

Each item carries its search text in the filter-item attribute. The query matches that value, not the visible text. So an item can match words it does not show, like a category. Typing fruit keeps Apple, Banana, and Cherry.

Lanes#

Filter can share a space with other mechanisms. A filter-space names a filter-lane, and each item belongs to that lane. The filter touches only its own lane's items. Without filter-lane it filters every [filter-item] in the space, unchanged.

Next: Hx →