Lovablefeatureintermediate
Add Search to Lovable App
Add global search with debounced input, command palette, keyboard navigation, and recent searches.
What you'll get
A polished command palette search with debounce, keyboard navigation, result grouping, and recent searches.
The Prompt
Add global search functionality to my Lovable app. REQUIREMENTS: 1. Add a search icon in the navbar that opens a command palette modal (triggered by clicking or pressing Cmd+K / Ctrl+K). 2. The command palette has a search input with 300ms debounce. As the user types, show results grouped by type (pages, content, users). 3. Query Supabase using ilike or full-text search across relevant tables. 4. Each result shows: icon (by type), title, subtitle/description, and a preview snippet with the matching text highlighted. 5. Support keyboard navigation: arrow keys to move between results, Enter to select, Escape to close. 6. Store the last 5 searches in localStorage and show them as "Recent Searches" when the palette opens with no query. 7. Show a loading spinner while searching and "No results found" with suggestions when empty. 8. Close the modal when clicking outside or pressing Escape. DATABASE: - No new tables needed. Queries existing tables with search columns. - Consider adding a GIN index on frequently searched text columns for performance. SECURITY: - Sanitize search input to prevent injection. - Respect RLS — users should only see results they have permission to view.
Replace these variables
| Variable | Replace with |
|---|---|
| [SEARCHABLE_TABLES] | Tables and columns to search (e.g., posts.title, posts.content, users.name) |
| [RESULT_TYPES] | Categories for grouping results (e.g., Pages, Posts, Users) |
Tips for best results
Add a GIN index on text columns you search frequently — it dramatically improves performance.
Keep the debounce at 300ms to balance responsiveness with API call reduction.
Follow-up prompts
Add search analytics
Track what users search for and which results they click. Store in a "search_logs" table to identify content gaps and popular queries.
Add filters to search
Add filter chips below the search input for narrowing results by type, date range, or category.