FilterField
Das Feld, das die Liste filtert, direkt darunter, während die Person tippt, und angibt, wie viele übrig bleiben.
Auf dieser Seite
Playground
- Wöchentliche Sicherung
- Pflanzen gießen
- Monatsbericht
- Fotos ersetzen
Verzögerung
Asynchrone Suche
Hintergrund
<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">Filtern</label><span class="box"><input class="feitio-input" id="pg-filter" type="search" autocomplete="off" placeholder="Pflanzen, Sicherung…" 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="Wöchentliche Sicherung"><span class="name">Wöchentliche Sicherung</span></li><li data-search="Pflanzen gießen"><span class="name">Pflanzen gießen</span></li><li data-search="Monatsbericht"><span class="name">Monatsbericht</span></li><li data-search="Fotos ersetzen"><span class="name">Fotos ersetzen</span></li></ul></div>Wann verwenden
- Über einer bereits auf dem Bildschirm befindlichen Liste oder Katalog: Symbole, Komponenten, eine lange Tabelle.
Wann nicht verwenden
- Ganzes Produkt suchen: Suchen.
- Kurze Listen: Das Auge findet es allein.
Beispiele
- Wöchentlicher Backup
- Pflanzen gießen
- Monatlicher Bericht
- Fotos ersetzen
Nichts mit diesem Namen.
List filtern
Typ: Die Liste wird kleiner und die Anzahl folgt. Bei keinem Ergebnis sagt ein Satz Bescheid.
Code anzeigen
<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>- Wöchentliche Sicherung
- Pflanzen gießen
- Monatsbericht
- Fotos ersetzen
Warten und auf dem Server suchen
Standardmäßig aus. Mit data-debounce wartet das Feld, bis die Person aufhört zu tippen, und die Linie darunter zeigt, wie lange es noch dauert. Mit data-async sagt es der Seite mit dem Ereignis feitio-filter Bescheid und dreht einen Strich, bis sie done() aufruft. Hier dauert die gespielte Suche eine Sekunde.
Code anzeigen
<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>Barrierefreiheit
- Das Feld hat einen Label, auch wenn er unsichtbar ist; die Anzahl wird angekündigt (
aria-live). - Akzentunabhängige Suche: "acao" findet "ação".
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-filter" | um | Feld und Anzahl nebeneinander. |
data-filter | List-ID | Am Feld: Welche Liste es filtert. |
data-search | jeder einzelnen Position | Die Wörter, die das Item finden. |
data-count, data-empty | List-ID | Die Anzahl und der Satz „nichts gefunden". |