🔍 Search & Discovery
Comprehensive search and discovery components for enhanced product finding. Includes autocomplete, filters, faceted search, and smart discovery features.
Classes used: sparkles-search-form, sparkles-search-input, sparkles-filter-chip, and more from the search.css file.
Search Bars
Basic Search Bar
Search with Voice & Barcode
Search with Autocomplete
Recent Searches
Products
Categories
No results found for ""
Searching...
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
Search Results Layouts
Results Header with Controls
Search Results for "sparkles"
Showing 1-24 of 156 results
Active Filters Display
Filters:
No Results State
No results found
We couldn't find any products matching your search for "xyz123"
Try these suggestions:
- Check your spelling
- Try more general keywords
- Browse our categories
Discovery Features
Popular Searches
Trending Now
Related Searches
Category Discovery Cards
Visual Search Upload
Search by Image
Drag and drop an image here or click to browse
Find similar products
Identify brands & styles
Usage Examples
// Basic Search Form
<form class="sparkles-search-form" action="/catalogsearch/result/" method="get">
<div class="relative">
<input type="search" name="q"
class="sparkles-search-input"
placeholder="Search for products..."
autocomplete="off">
<button type="submit" class="sparkles-search-button">
<!-- Search icon -->
</button>
</div>
</form>// Search with Autocomplete
<div class="relative" x-data="sparklesSearchAutocomplete()">
<input type="search"
class="sparkles-search-input"
@input="onInput($event)"
@focus="openResults()"
@blur="setTimeout(() => closeResults(), 200)"
placeholder="Type to search..."
autocomplete="off">
<!-- Autocomplete dropdown -->
</div>// Filter Components
<div class="sparkles-filter-section">
<h5 class="sparkles-filter-title">Price Range</h5>
<div class="sparkles-price-range">
<input type="range" x-model="currentMin" class="sparkles-range-input">
<input type="range" x-model="currentMax" class="sparkles-range-input">
</div>
</div>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