⚡Vibe Coding

Suchfunktion einbauen

Suche die sofort Ergebnisse liefert

Jede App mit mehr als 10 Eintraegen braucht eine Suche. Mit Debouncing, Server-Side Search und einem Command-Palette Pattern baust du eine Suche die sich anfuehlt wie Spotlight auf dem Mac.

Pro-Tip — Der schnelle Weg

Nutze die Shadcn Command Komponente (cmdk). Sie gibt dir eine fertige Spotlight-Suche mit Keyboard Navigation, genau wie Command+K in VS Code.

Seite 1

Command Komponente installieren

Shadcn Command basiert auf cmdk und gibt dir eine fertige Suchbox mit Tastatur-Navigation und Filterung.

npx shadcn@latest add command dialog

Command Palette bauen

Baue eine Suchbox die mit Command+K geoeffnet wird. Zeige Ergebnisse gruppiert nach Typ: Seiten, Aktionen, Daten.

'use client'
import { CommandDialog, CommandInput, CommandList, CommandGroup, CommandItem } from '@/components/ui/command'
import { useState, useEffect } from 'react'

export function SearchCommand() {
const [open, setOpen] = useState(false)

useEffect(() => {
const down = (e) => {
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
setOpen(o => !o)
}
}
document.addEventListener('keydown', down)
return () => document.removeEventListener('keydown', down)
}, [])

return (
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput placeholder='Suche...' />
<CommandList>
<CommandGroup heading='Seiten'>
<CommandItem>Dashboard</CommandItem>
<CommandItem>Einstellungen</CommandItem>
</CommandGroup>
</CommandList>
</CommandDialog>
)
}

Debounced Search Input

Fuer eine einfache Suchleiste nutze Debouncing. Warte 300ms nach der letzten Eingabe bevor du die API aufrufst.

const [query, setQuery] = useState('')
const [debouncedQuery, setDebouncedQuery] = useState('')

useEffect(() => {
const timer = setTimeout(() => setDebouncedQuery(query), 300)
return () => clearTimeout(timer)
}, [query])

useEffect(() => {
if (debouncedQuery) fetchResults(debouncedQuery)
}, [debouncedQuery])

Server-Side Search

Fuer grosse Datenmengen nutze die Datenbank-Suche. Supabase hat textSearch eingebaut, PostgreSQL Full-Text Search ist kostenlos und schnell.

const { data } = await supabase
.from('posts')
.select()
.textSearch('title', query)

URL-basierte Suche

Speichere den Suchbegriff in der URL damit Nutzer Suchergebnisse teilen koennen. Nutze useSearchParams fuer das Query-Parameter Management.

Seite 2

Warum das funktioniert

Command Palette Pattern ist intuitiv fuer Power-User und Anfaenger
Debouncing verhindert hunderte unnoetige API-Calls
URL-basierte Suche macht Ergebnisse teilbar und bookmarkbar
Server-Side Search skaliert fuer Millionen von Eintraegen

Tipps

300ms Debounce ist der Sweet Spot zwischen Reaktivitaet und Performance
Zeige 'Keine Ergebnisse' statt einer leeren Liste
Highlighte den Suchbegriff in den Ergebnissen fuer bessere Orientierung
Command+K ist zum Standard geworden, Nutzer erwarten es

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen