Back to DocsUX Pattern

Recipe Search Autocomplete

Real-time ingredient and recipe suggestions with keyboard navigation.

chicken alfr

Chicken Alfredo

Pasta · 30 min · 4 servings

Chicken Alfredo Bake

Casserole · 45 min · 6 servings

Chicken Alfredo Soup

Soup · 25 min · 4 servings

↑↓ navigate · ↵ select · esc close

Debounced Input

250ms debounce before firing search. Cancel in-flight requests on new keystrokes to avoid stale results.

Highlight Matching

Bold the substring that matches the query. Use case-insensitive partial matching for ingredient synonyms.

Grouped Results

Separate sections for recipes, ingredients, and recent searches. Max 8 items per group.

Empty State

Show “No results for ‘xyz’” with a link to submit a recipe request. Never show a blank dropdown.

API Contract

GET /api/search?q=chicken+alfr&limit=8
→ {
  "recipes": [
    {
      "id": "ck-alfredo",
      "title": "Chicken Alfredo",
      "match": [0, 7],
      "meta": "Pasta · 30 min"
    }
  ],
  "suggestions": ["chicken alfredo bake"]
}