Skip to main content
Our new developer certification is live!

HeaderSearch

Client-side header search with typeahead suggestions, debouncing, and result previews.

Props

None - self-contained component that manages its own state.

Usage

import HeaderSearch from '@/components/molecules/HeaderSearch';

<HeaderSearch />

Features

  • Typeahead search: Fetches suggestions from /api/search/typeahead as the user types
  • Debounced requests: 250ms debounce to avoid excessive API calls
  • Minimum query length: Requires at least 2 characters before searching
  • Abort controller: Cancels in-flight requests when query changes
  • Result cards: Displays results using SearchResultCard component
  • Loading state: Shows "Searching..." during API calls
  • Empty state: Shows "No matches yet." when no results found
  • Full search link: "View all results" link at bottom navigates to /search?q=...
  • Form submission: Pressing Enter navigates to the full search page

The dropdown appears when:

  • Query is at least 2 characters
  • Either loading or results are available

The dropdown closes when:

  • Query is cleared
  • A result is clicked
  • "View all results" is clicked

Notes

  • Client component ('use client')
  • Uses the SearchBar molecule for the input
  • Uses the SearchResultCard component for result items
  • Positioned with z-30 and max-width constraints for desktop layout
  • Used inside DesktopNavigation and MobileNavigation