Search & Filtering Pattern
Combining traditional keyword search with AI-powered natural language queries for flexible data exploration.
Two Search Modes
Fidus provides two complementary search modes to serve different user needs.
1. Traditional Search
Keyword search with structured filters (date range, category, amount, status). Best for users who know exactly what they're looking for.
2. AI-Powered Search
Natural language queries interpreted by an LLM. Best for exploratory search and complex queries without remembering exact filter names.
When to Use Each Mode
Understanding the strengths of each search mode helps users choose the right approach.
| Aspect | Traditional Search | AI-Powered Search |
|---|---|---|
| Best For | Precise searches, power users | Exploratory search, casual users |
| Input | Keywords + filters | Natural language |
| Speed | Instant | 1-2 seconds (LLM processing) |
| Precision | High (user controls filters) | Good (LLM interprets intent) |
| Learning Curve | Requires knowing filter options | Minimal (conversational) |
Interactive Example
Try both search modes to experience the difference in interaction patterns.
Whole Foods
2024-01-28 • Food
87.50 EUR
Shell Gas Station
2024-01-27 • Transport
65.00 EUR
Netflix
2024-01-26 • Entertainment
15.99 EUR
Starbucks
2024-01-25 • Food
8.50 EUR
Amazon
2024-01-24 • Shopping
124.99 EUR
Trader Joe's
2024-01-23 • Food
45.30 EUR
Usage Guidelines
When to use
- •Users need to find specific items in large datasets
- •Multiple filter dimensions are available (date, category, amount, status)
- •Users vary from casual (prefer AI) to power users (prefer traditional)
- •Queries can be complex ("groceries last month under 50 EUR")
Best practices
- •Provide both traditional and AI search modes
- •Show search history and contextual suggestions
- •Highlight matched keywords in results
- •Debounce search input (300ms) to reduce API calls
- •Show active filters as dismissible chips
- •Handle typos with fuzzy matching
- •Display result count and filter status clearly
Accessibility
- •Use aria-live="polite" for result count announcements
- •Provide keyboard shortcut (Cmd+K / Ctrl+K) to focus search
- •Announce filter changes to screen readers
- •Ensure filter chips have clear aria-labels for removal
- •Move focus to results after search completes
Do's and Don'ts
✓ Do
- •Provide both traditional and AI search options
- •Show active filters clearly with remove buttons
- •Debounce input to avoid excessive API calls
- •Display result count and empty states
- •Preserve search state when navigating away
- •Suggest queries based on user context
✗ Don't
- •Force users into one search mode only
- •Hide advanced filters from power users
- •Show loading spinner immediately (wait 200ms)
- •Clear input on failed search
- •Ignore typos without fuzzy matching
- •Make filters hard to discover or use
Related Components
TextInput
Search input field
Chip
Filter toggles
Badge
Result counts
Button
Actions and mode toggle
Empty States
No results handling
Loading States
Search in progress