## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/menu-search.json ``` ## Usage ```tsx import { MenuSearch } from "@/components/restaurant/menu/menu-search" export function MenuSearchExample() { const [searchQuery, setSearchQuery] = useState("") return ( ) } ``` ## Variants The Menu Search component supports different search experiences: ### Default The default variant provides a clean search input with optional suggestions. ```tsx ``` ### Compact The compact variant is optimized for mobile and limited space. ```tsx ``` ### With Filters The filters variant includes dropdown filters for categories and dietary options. ```tsx ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `string` | `""` | Current search query | | `onChange` | `(value: string) => void` | - | **Required.** Callback when search query changes | | `placeholder` | `string` | `"Search menu..."` | Input placeholder text | | `suggestions` | `SearchSuggestion[]` | `[]` | Array of search suggestions | | `isLoading` | `boolean` | `false` | Whether suggestions are loading | | `onSuggestionSelect` | `(suggestion: SearchSuggestion) => void` | - | Callback when suggestion is selected | | `filters` | `SearchFilters` | - | Available filter options | | `activeFilters` | `SearchState` | - | Currently active filters | | `onFilterChange` | `(filters: Partial) => void` | - | Callback when filters change | | `showSuggestions` | `boolean` | `true` | Whether to show autocomplete suggestions | | `showRecentSearches` | `boolean` | `false` | Whether to show recent searches | | `showPopularSearches` | `boolean` | `false` | Whether to show popular searches | | `variant` | `"default" \| "compact" \| "with-filters"` | `"default"` | Visual variant | | `showIcon` | `boolean` | `true` | Whether to show search icon | | `autoFocus` | `boolean` | `false` | Auto focus input on mount | | `clearable` | `boolean` | `true` | Show clear button when input has value | | `className` | `string` | - | Additional CSS classes | ## Examples ### With Autocomplete ```tsx { console.log("Selected:", suggestion) }} /> ``` ### With Recent Searches ```tsx setSearchQuery(search)} /> ``` ### With Popular Searches ```tsx ``` ### With Filters and Sorting ```tsx ``` ### Voice Search Enabled ```tsx startVoiceRecognition()} actions={ } /> ``` ## Features - **Real-time Search**: Instant results as you type - **Autocomplete**: Smart suggestions based on menu items - **Category Filtering**: Filter by cuisine type, dietary restrictions - **Popular Searches**: Show trending and popular search terms - **Search History**: Remember recent searches (optional) - **Keyboard Navigation**: Full keyboard accessibility - **Voice Search**: Support for voice input (optional) - **Mobile Optimized**: Touch-friendly interface ## Keyboard Navigation The component supports full keyboard navigation: - `ArrowDown` - Move to next suggestion - `ArrowUp` - Move to previous suggestion - `Enter` - Select current suggestion - `Escape` - Clear search or close suggestions - `Tab` - Navigate through filters (when available) ## State Management ### Basic Search State ```tsx const [searchState, setSearchState] = useState({ query: "", isSearching: false, results: [] }) const handleSearch = async (query: string) => { setSearchState(prev => ({ ...prev, query, isSearching: true })) const results = await searchMenuItems(query) setSearchState(prev => ({ ...prev, results, isSearching: false })) } ``` ### With Search Context ```tsx const SearchProvider = ({ children }) => { const [searches, setSearches] = useState([]) const addSearch = (query) => { setSearches(prev => [query, ...prev.slice(0, 9)]) localStorage.setItem('recentSearches', JSON.stringify(searches)) } return ( {children} ) } ``` ## Accessibility The Menu Search component follows accessibility best practices: - Proper ARIA labels for search input and suggestions - Keyboard navigation support for all interactive elements - Screen reader announcements for search results - Clear focus indicators - Voice search option for users who prefer voice input ## Styling The component uses Tailwind CSS classes and can be customized through: - CSS custom properties for theming - The `className` prop for wrapper styling - Tailwind variants for different states - Custom suggestion item rendering ## Related Components - [Menu Item Card](/docs/components/menu/menu-item-card) - Display search results - [Category Filter](/docs/components/menu/category-filter) - Additional filtering - [Menu Grid](/docs/components/menu/menu-grid) - Layout for search results - [Sort Controls](/docs/components/menu/sort-controls) - Sort search results