Velin Search 1.2.0

Das <velin-search> Web Component stellt Dokumentations- und In-App-Suche bereit, powered by core/search — Fuzzy-Ergebnisse, Kategorien und Tastaturnavigation. English: Velin Search

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Docs-Sites, Marketing-Sites oder Apps, die einen JSON-Suchindex ausliefern.
Du möchtest ein Combobox-artiges Suchfeld, ohne Listbox-ARIA selbst zu bauen.
Für den Deep Dive (Index-Build, Provider, JS-API) siehe den VelinSearch-Guide.

Wann nicht

Nutze es nicht als vollständigen CMS-/Server-Suchersatz, wenn du ausschließlich gerankte Backend-Ergebnisse brauchst.
Prefer Befehlspalette for action menus (⌘K-style commands) rather than content search.
Do not invent undocumented attributes — stick to the observed API below.

Beispiel

<velin-search
  index="/search-index.json"
  categories="docs,components"
  min-chars="2"
  fuzzy="0.2"
  debounce="120"
  placeholder="Search…"
  aria-label="Search">
</velin-search>

Deklaratives Binding (ohne Custom Element) wird im VelinSearch-Guide.

Attribute

Attribut	Standard	Beschreibung
`index`	`/search-index.json`	JSON-Index-URL
`categories`	alle	Kommagetrennter Kategorie-Filter
`min-chars`	`2`	Minimale Suchlänge
`fuzzy`	`0.2`	Tippfehler-Toleranz
`placeholder`	`Search…`	Input-Placeholder
`debounce`	`120`	Input-Debounce (ms)
`aria-label`	`Search`	Accessible Name des Combobox-Inputs

Das Element löst keine eigenen Events aus. Properties spiegeln die Attribute: indexUrl, categories, minChars, fuzzy, debounceMs.

Input: role="combobox", aria-expanded, aria-autocomplete="list", aria-controls, optional aria-activedescendant.
Ergebnisse: role="listbox"; Optionen sind Links mit role="option".
Statustext nutzt eine polite Live Region für Ergebnisanzahlen.
Keyboard: ↑↓ navigate, Enter open, Escape close.

Contract-Status: pass.

Velin Search 1.2.0

Wann verwenden

Wann nicht

Beispiel

Attribute

Barrierefreiheit

Verwandt