FilterField
The field that filters the list right below as the person types, and says how many are left.
On this page
Playground
- Weekly backup
- Water the plants
- Monthly report
- Replace the photos
Debounce
Async search
Background
<div class="feitio-stack" data-gap="3" style="inline-size: min(100%, 26rem)" ><div class="feitio-filter"><label class="feitio-visually-hidden" for="pg-filter">Filter</label><span class="box"><input class="feitio-input" id="pg-filter" type="search" autocomplete="off" placeholder="plants, backup…" data-filter="pg-filter-list"><span class="wait" aria-hidden="true"></span><svg class="busy" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="1" d="M12 3.4C16.9 3.2 20.7 7.1 20.6 12C20.5 16.7 16.7 20.6 12 20.6C7.2 20.6 3.4 16.8 3.4 12.1C3.4 7.6 6.9 3.9 11.4 3.5"></path></svg></span><span class="count" data-count="pg-filter-list" aria-live="polite"></span></div><ul class="feitio-task-list" id="pg-filter-list"><li data-search="Weekly backup"><span class="name">Weekly backup</span></li><li data-search="Water the plants"><span class="name">Water the plants</span></li><li data-search="Monthly report"><span class="name">Monthly report</span></li><li data-search="Replace the photos"><span class="name">Replace the photos</span></li></ul></div>When to use
- Above a list or catalog already on screen: the icons, the components, a long table.
When not to use
- To search the whole product: Search.
- Short lists: the eye finds it alone.
Examples
- Weekly backup
- Water the plants
- Monthly report
- Replace the photos
Nothing by that name.
Filter a list
Type: the list shrinks and the count follows. With no result, a sentence says so.
Show code
<div class="feitio-filter">
<label class="feitio-visually-hidden" for="filtro">Filtrar</label>
<input class="feitio-input" id="filtro" type="search" data-filter="lista">
<span class="count" data-count="lista" aria-live="polite"></span>
</div>
<ul id="lista">
<li data-search="regar as plantas">…</li>
</ul>- Weekly backup
- Water the plants
- Monthly report
- Replace the photos
Wait and search on the server
Off by default. With data-debounce, the field waits for the typing to stop, and the line under it shows how long is left. With data-async, it tells the page with the feitio-filter event and turns a stroke until the page calls done(). Here, the pretend search takes a second.
Show code
<input class="feitio-input" type="search" data-filter="lista"
data-debounce="600" data-async data-busy-label="Buscando…">
<script>
campo.addEventListener('feitio-filter', async (e) => {
const itens = await buscar(e.detail.query);
mostrar(itens);
e.detail.done();
});
</script>Accessibility
- The field has a label, even if hidden; the count is announced (
aria-live). - Accent-insensitive search: "acao" finds "ação".
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-filter" | around | The field and the count, side by side. |
data-filter | the list id | On the field: which list it filters. |
data-search | on each item | The words that find the item. |
data-count, data-empty | the list id | The count and the nothing-found sentence. |