Search

Die Produkt-Suche: ein Feld in der Mitte des Bildschirms mit Ergebnissen, die sich einzeln pro Zeile beim Tippen ergeben.

Auf dieser Seite

Playground

Ergebnisse

Hintergrund

HTML

<dialog open class="feitio-dialog search-dialog search-sample" id="pg-search" aria-labelledby="pg-search-t"><form method="dialog"><h2 id="pg-search-t" class="feitio-visually-hidden">Feitio durchsuchen</h2><div class="search-head"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-search"></use></svg><label class="feitio-visually-hidden" for="pg-search-field">Feitio durchsuchen</label><input class="search-field" id="pg-search-field" type="search" autocomplete="off" placeholder="Button, Farbe…"><button type="submit" class="feitio-button close" data-size="small" value="close"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Schließen</button></div><ul class="results"><li><a href="#playground" data-active><strong>Table</strong><small>Komponenten</small></a></li><li><a href="#playground"><strong>Tokens</strong><small>Entwicklung</small></a></li></ul><p class="foot"><span><kbd class="feitio-kbd">↵</kbd> öffnet das erste</span><span><kbd class="feitio-kbd">↑</kbd><kbd class="feitio-kbd">↓</kbd> auswählen</span><span><kbd class="feitio-kbd">Esc</kbd> schließt</span></p></form></dialog>

Wann verwenden

In einem Produkt oder einer Dokumentation mit vielen Seiten, wo das Finden von Dingen über das Menü lange dauert.

Wann nicht verwenden

Um eine Liste zu filtern auf dem Bildschirm: ein Filterfeld darüber, wie in den Katalogen.
Bei wenigen Seiten: das Menü reicht aus.

Beispiele

Dieses Suchfeld der Website

Klicken Sie auf die Taste oder drücken Sie / oder Ctrl + K.

Code anzeigen

HTML

<button type="button" class="feitio-button" data-open-search>…Buscar</button>
<dialog class="feitio-dialog search-dialog" aria-labelledby="busca-t">
  <form method="dialog">
    <div class="search-head">…<input class="search-field" type="search">…</div>
    <ul class="results">…</ul>
    <p class="foot">…</p>
  </form>
</dialog>

Anatomie

TableClose

TabelleKomponenten
TokensEntwicklung

↵ öffnet den ersten EintragEsc schließt ihn

Feld: mit Lupe und Schließen auf derselben Zeile.
Erfolge: einer pro Zeile, Name und Bereich; der erste ist bereits markiert.
Tasten: was jeder tut.

States

Öffnen: in der Mitte des Bildschirms, etwas über dem Zentrum; ein Klick außerhalb schließt ihn, denn das Suchen entscheidet nichts.
Tastaturtippen: die Ergebnisse ändern sich mit jedem Buchstaben; Enter öffnet den ersten Eintrag und die Pfeile durchlaufen die Liste.
Nichts gefunden: sagt es so und schlägt ein anderes Wort vor.

Woher die Ergebnisse stammen

Der Index wird erstellt, wenn die Seite veröffentlicht wird, von jeder Seite (mit Pagefind, das ohne Server läuft). In diesem Entwurf ist die Liste manuell geschrieben.

Es ist ein benannter Dialog; der Fokus beginnt im Feld.
Die Ergebnisse sind Links: Tab, Pfeile und Enter funktionieren.

Attribute

Attribut	Werte	Zum Zweck
`data-open-search`	auf der Öffnungs-Button	Öffnet die Suche.
`class="feitio-dialog search-dialog"`	im `<dialog>`	Die Suche, die mit einem Klick außerhalb schließt.
`class="results"`	die Liste	Eins Ergebnis pro Zeile.