Search and Filter UX Pattern Library

You are a search UX designer who has designed search experiences for e-commerce catalogs with 1M+ products and content platforms with 10M+ items.

Content type: [PRODUCTS/ARTICLES/PEOPLE/JOBS/PROPERTIES/COURSES/FILES]
Catalog size: [UNDER 100/100-1000/1000-10000/10000-100000/100000+]
Primary filter dimensions: [LIST 3-5 KEY ATTRIBUTES USERS FILTER BY]
User expertise: [NOVICE/INTERMEDIATE/EXPERT/MIXED]
Platform: [WEB/MOBILE/BOTH]

Design a complete search and filter system:

**1. Search Bar Design**
- Placement: header persistent, page-specific, or expandable icon
- Input behavior: type-ahead suggestions, recent searches, popular searches
- Suggestion categories: items, categories, brands, content
- Search-as-you-type vs search-on-submit
- Voice search integration (mobile)
- Clear/reset button behavior
- Loading state during search
- Keyboard shortcut (Cmd/Ctrl+K for command palette style)

**2. Autocomplete / Suggestions**
- Suggestion types: exact match, fuzzy match, category match, popular
- Visual treatment: highlight matched characters, show category, show thumbnail
- Maximum suggestions shown (5-8)
- Keyboard navigation (arrow keys, enter, escape)
- "Search for '[query]'" fallback option
- Recent searches persistence

**3. Filter Panel Design**
- Filter position: left sidebar, top horizontal, drawer (mobile)
- Filter types by attribute:
  - Categorical: checkboxes, pills, or swatches (color)
  - Range: slider, dual input fields (price, size)
  - Boolean: toggle switch (in stock, free shipping)
  - Date: date picker or preset ranges
  - Rating: star selector with minimum threshold
  - Search within filters (for long lists)
- Filter count indicator (show number of matches per option)
- Active filter chips (easily removable)
- Clear all filters action
- Filter grouping and ordering

**4. Results Display**
- Grid vs list view toggle (with persistence)
- Sort options (relevance, price low-high, newest, rating, popularity)
- Results count ("Showing 1-24 of 1,234 results")
- Pagination vs infinite scroll vs load more button
- No results state (suggestions, spell check, broaden filters)
- Few results state ("Only 3 results - try removing some filters")

**5. Results Card Design**
- Essential information hierarchy per card
- Image aspect ratio and fallback
- Quick actions (add to cart, save, compare, quick view)
- Hover/press state with additional info
- Badge overlays (new, sale, trending, low stock)
- Match highlight in search results

**6. Mobile-Specific Patterns**
- Filter as bottom sheet or full-screen overlay
- Horizontal scrolling filter chips (most used)
- Pull-down to reveal sort and filter
- Sticky search bar on results page
- Swipe between grid and list views
- Compact card design for thumb-zone scrolling

**7. Advanced Search Features**
- Saved searches with notification option
- Compare mode (select 2-4 items for side-by-side)
- Visual search (image upload)
- Natural language search handling
- Synonym and typo tolerance
- Faceted search URL structure (shareable filtered views)

**8. Performance**
- Debounce timing for type-ahead (200-300ms)
- Skeleton loading for results
- Filter update without full page reload
- URL state management (back button preserves filters)
- Prefetch next page of results

For every element: specify exact behavior, placement, sizing, and interaction details. Include copy for empty states and error messages.