Suchergebnisse

Die Seite nach der Suche. Gefundene Wörter markiert, Tabs je Typ, Filter mit Zahlen, Sofortvorschläge und ein leeres Ergebnis, das trotzdem hilft.

5 Variants

Kategorie wechseln

Liste mit Tabs

Eine Ergebnisliste mit markierten Fundstellen. Tabs je Typ mit Zahlen, weitere Ergebnisse auf Wunsch.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/search-results

Bringt mit utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="list" query="oak table" results={…} types={…} action="/search" />

Source

Gruppiert

Die besten drei je Typ, jede Gruppe mit einem Link zu allen. Suche und Gruppen bleiben links stehen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/search-results

Bringt mit utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="grouped" query="…" results={…} types={…} />

Source

Mit Filtern

Facetten mit Live-Zahlen, aktive Filter als Chips, Sortierung. Auf dem Telefon öffnen die Filter an Ort und Stelle.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/search-results

Bringt mit utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="with-filters" query="…" results={[{ …, facets: { wood: "oak" } }]} facets={…} />

Source

Sofortsuche

Vorschläge beim Tippen, Pfeiltasten zum Bewegen und Enter zum Öffnen. Leer zeigt sie letzte und beliebte Suchen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/search-results

Bringt mit utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="instant" results={…} types={…} recent={[…]} popular={[…]} />

Source

Keine Ergebnisse

Ein leeres Ergebnis, das trotzdem weiterführt. Ein Schreibvorschlag, beliebte Suchen und drei Wege weiter.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/search-results

Bringt mit utils, kit, button, icon, reveal, motion, section

Usage

<SearchResults variant="no-results" query="…" suggestion="…" popular={[…]} links={[…]} />

Source

Details

Was Suchergebnisse mitbringt, aus Registry und Quellcode gelesen.

Bereich: Content
Variants: 5
Version: 1.0.1 · seit 1.0.0
Datei: components/ui/search-results.tsx
Bringt mit: utilskitbutton iconrevealmotionsection
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 27 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle SearchResultsProps aus components/ui/search-results.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
SearchResultsVariant
listgroupedwith-filtersinstantno-results
queryoptional
string
The words searched for
resultsoptional
SearchResult[]
typesoptional
SearchType[]
Tabs and groups, in this order
facetsoptional
SearchFacet[]
with-filters: the facets
pageSizeoptional
number
list: how many results show before "Show more"
suggestionoptional
string
no-results: a corrected query
popularoptional
string[]
no-results, instant: popular searches
recentoptional
string[]
instant: searches of this visitor
linksoptional
{ icon: IconName; title: string; text: string; href: string }[]
no-results: ways forward
actionoptional
string
Where the form sends the query (GET, field q)
onSearchoptional
(query: string) => void
Called with the query instead of sending the form

Eingebaute Texte

Diese Texte schreibt Suchergebnisse selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 27 Texte anzeigen

Schlüssel	Englisch	Deutsch
search	Englisch Search	Deutsch Suchen
placeholder	Englisch Search the site	Deutsch Website durchsuchen
clear	Englisch Clear search	Deutsch Suche leeren
results	Englisch {n} results for “{q}”	Deutsch {n} Ergebnisse für „{q}“
result	Englisch 1 result for “{q}”	Deutsch 1 Ergebnis für „{q}“
all	Englisch All	Deutsch Alle
showMore	Englisch Show more results	Deutsch Weitere Ergebnisse zeigen
loading	Englisch Loading	Deutsch Wird geladen
shown	Englisch Showing {a} of {b}	Deutsch {a} von {b} angezeigt
viewAll	Englisch All {n} in {type}	Deutsch Alle {n} in {type}
filters	Englisch Filters	Deutsch Filter
clearFilters	Englisch Clear all	Deutsch Alle entfernen
sort	Englisch Sort by	Deutsch Sortieren nach
relevance	Englisch Relevance	Deutsch Relevanz
az	Englisch Title A to Z	Deutsch Titel A bis Z
remove	Englisch Remove filter {f}	Deutsch Filter {f} entfernen
noMatch	Englisch No result matches these filters. Remove one to see more.	Deutsch Kein Ergebnis passt zu diesen Filtern. Entferne einen, um mehr zu sehen.
noneTitle	Englisch Nothing found for “{q}”	Deutsch Nichts gefunden für „{q}“
noneText	Englisch Check the spelling, try a shorter or a more general word, or start from one of the ways below.	Deutsch Prüf die Schreibweise, versuch ein kürzeres oder allgemeineres Wort oder starte mit einem der Wege unten.
didYouMean	Englisch Did you mean	Deutsch Meintest du
popular	Englisch Popular searches	Deutsch Oft gesucht
recent	Englisch Recent searches	Deutsch Zuletzt gesucht
suggestions	Englisch Suggestions	Deutsch Vorschläge
enter	Englisch to open	Deutsch öffnen
move	Englisch to move	Deutsch bewegen
close	Englisch to close	Deutsch schließen
noneInstant	Englisch No direct match. Press Enter to search everything for “{q}”.	Deutsch Kein direkter Treffer. Mit Enter durchsuchst du alles nach „{q}“.

Aus dem Quellcode der Component abgeleitet.

Suchergebnisse reagiert selbst auf die Tasten Escape, Enter, Pfeil hoch, Pfeil runter und Leertaste.
Setzt aria-controls, aria-expanded, aria-label, aria-labelledby und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen listbox, option, search, status, tab und tablist.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Suchergebnisse?

Mit aiw add @ai-website/search-results. Der Befehl legt die Datei components/ui/search-results.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, motion und section. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Suchergebnisse?

5 Varianten, Liste mit Tabs, Gruppiert, Mit Filtern, Sofortsuche und Keine Ergebnisse. Du wählst sie mit der Prop variant, zum Beispiel variant="grouped".

Kann ich die Texte von Suchergebnisse übersetzen?

Ja. Suchergebnisse bringt 27 eigene Texte auf Deutsch und Englisch mit, etwa „Suchen“, „Website durchsuchen“ und „Suche leeren“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Suchergebnisse einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Suchergebnisse mit aiw_components und installieren sie mit aiw_add @ai-website/search-results. Nenn im Prompt die Variante, etwa variant="list", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Suchergebnisse ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden SearchResults-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Suchergebnisse stehen.

Suchergebnisse

Liste mit Tabs

Gruppiert

Mit Filtern

Sofortsuche

Keine Ergebnisse

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit