Build · Database · intermediate

Add Full-Text Search to a Data Table

Database General intermediate LovableBolt.new

How to use

  1. Copy the prompt below
  2. Paste it into Lovable, Bolt.new
  3. Review the output and follow up with refinements
Prompt
Add a live search input above the existing data table. As the user types, wait 300ms after the last keystroke (debounce) before querying the database to avoid excessive requests. Use Supabase's full-text search (or a ILIKE query if full-text is not yet set up) to search across both the title and description columns simultaneously. Highlight the matching search term inside the returned results using a yellow background span so users can see exactly what matched. When the search returns no results, show a centered empty state with the message "No results for '[query]'" and a suggestion to try different keywords. Add an X icon button inside the search input that clears the query and restores the full unfiltered table. Ensure that any active column sort order is preserved when search results are displayed.

Related prompts

Was this helpful?