Search & Filter Implementation

Implement search and filter interfaces with comprehensive frontend components and backend query optimization.

Purpose

This skill provides production-ready patterns for implementing search and filtering functionality across the full stack. It covers React/TypeScript components for the frontend (search inputs, filter UIs, autocomplete) and Python patterns for the backend (SQLAlchemy queries, Elasticsearch integration, API design). The skill emphasizes performance optimization, accessibility, and user experience.

When to Use

• Building product search with category and price filters
• Implementing autocomplete/typeahead search
• Creating faceted search interfaces with dynamic counts
• Adding search to data tables or lists
• Building advanced boolean search for power users
• Implementing backend search with SQLAlchemy or Django ORM
• Integrating Elasticsearch for full-text search
• Optimizing search performance with debouncing and caching
• Creating accessible search experiences

Core Components

Frontend Search Patterns

Search Input with Debouncing

• Implement 300ms debounce for performance
• Show loading states during search
• Clear button (X) for resetting
• Keyboard shortcuts (Cmd/Ctrl+K)
• See references/search-input-patterns.md

Autocomplete/Typeahead

• Suggestion dropdown with keyboard navigation
• Highlight matched text in suggestions
• Recent searches and popular items
• Prevent request flooding with debouncing
• See references/autocomplete-patterns.md

Filter UI Components

• Checkbox filters for multi-select
• Range sliders for numerical values
• Dropdown filters for single selection
• Filter chips showing active selections
• See references/filter-ui-patterns.md

Backend Query Patterns