🔍 Search & Discovery
Comprehensive search and discovery components for enhanced product finding. Includes autocomplete, filters, faceted search, and smart discovery features.
Classes used: sparkles-input-base, sparkles-filter-chip, and utility composition for search shells and action buttons.
Search Bars
Basic Search Bar
Search with Voice & Barcode
Search with Autocomplete
Live demo of sparklesHeaderSearchShell — calls the real autocomplete endpoint, shows real product suggestions and typo-tolerance.
Filter Components
Price Range Slider
Price Range
$
to
$
Color Filter Swatches
Color
Selected:
Size Filter
Size
Category Tree Filter
Categories
Brand Filter
Brand
Rating Filter
Customer Rating
Performance & Accessibility
Performance Features
- • Debounced search input reduces API calls during rapid typing
- • Result caching for common queries improves response times
- • Lazy loading for filter options with large datasets
- • Visual search uses optimized image processing for fast matching
Accessibility Support
- • Search inputs include proper labels and keyboard navigation support
- • Autocomplete results use ARIA combobox pattern with live announcements
- • Filter controls support keyboard operation and provide clear state feedback
- • Search results include skip links and proper heading structure