Search Component
Full-text search with FlexSearch and real-time results across documentation and demos
Basic Search (Default CSS)
This uses the default search CSS styles with proper positioning, padding, and separators.
Quick Searches
Click any term below to search the demo site content:
Custom Styled Search
This uses custom DaisyUI classes with theme-aware colors and spacing.
Search Features
- •Debounced input: Search triggers after 300ms of typing
- •Keyboard navigation: Use ↑↓ arrows to navigate results
- •Multi-field search: Searches title, description, content, and tags
- •Cached index: Fast subsequent searches with IndexedDB caching
- •Custom icons: Supports emoji, SVG imports, or image URLs
Event Log
Search Events
No events yet...
Implementation Details:
- FlexSearch Document API - High-performance full-text search
- Real search data - Uses actual demo site content index
- IndexedDB caching - Persistent cache with localStorage fallback
- Framework agnostic - Uses functional CSS classes, not framework-dependent
- Customizable styling - Every CSS class can be overridden
- Event-driven -
on:search,on:selectevents - Component logic access -
setQuery(),setResults() - Keyboard shortcuts - Arrow navigation, Enter to select, Escape to close