implementing-search-filterlisted

# 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