Intermediate5 min readShare
Was this chapter helpful?
Share
Help users find exactly what they need. Search bars, filters, sorting, and pagination patterns explained in plain English.
Searches through all the text content in your database. Like Google, but for your app. Type a word and it finds every item containing that word, even across multiple fields like title and description.
Best Chocolate Cake Recipe
A rich, moist chocolate cake that's easy to make...
Easy Chocolate Lava Cake
This recipe makes the perfect molten chocolate dessert...
Finds results even when the user misspells a word. Search for 'reciepe' and still get 'recipe' results. Great for forgiving typos and improving the user experience.
Classic Banana Bread Recipe
The best homemade banana bread recipe you'll ever try...
Quick Pasta Recipe for Beginners
A simple 15-minute pasta recipe anyone can make...
Lets users narrow results by categories, like filtering products by price range, color, and brand all at once. Think of Amazon's left sidebar filters.
Price Range
Color
Brand
Showing 12 results
Blue Running Shoe - $22
Blue Casual Sneaker - $19
Blue Sport Sandal - $24
Shows suggestions as the user types. A dropdown appears below the search bar with matching results, helping users find things faster and reducing typos.
A panel on the left with checkboxes, sliders, and dropdowns. Users select options to narrow results. Common on e-commerce sites and job boards.
Category
Price Range
Rating
Small pill-shaped tags showing what filters are active. Each chip has an 'x' to remove it. Shows users exactly what's applied at a glance.
A dropdown menu letting users reorder results: newest first, price low to high, most popular, alphabetical. Usually placed above the results grid.
Splits results into pages (1, 2, 3...) or loads more items as the user scrolls. Prevents loading thousands of items at once, keeping your app fast.
A search bar at the top combined with filters below. Users type a keyword, then narrow further by category, date, or price. The most powerful pattern.
A hosted search service that gives you blazing-fast, typo-tolerant search with minimal setup. Paste in your data and get an instant search API.
Pros
Extremely fast (results in milliseconds)
Typo tolerance and synonym support built in
Pre-built UI components (InstantSearch)
Cons
Gets expensive with large datasets
Data lives on Algolia's servers
An open-source alternative to Algolia. Self-host it or use their cloud service. Fast, typo-tolerant search with a simple API.
Pros
Open source and free to self-host
Easy setup with great documentation
Typo tolerance and filtering out of the box
Cons
Self-hosting requires server management
Smaller ecosystem than Algolia
A lightweight JavaScript library for fuzzy search. Runs entirely in the browser — no server or external service needed. Perfect for small datasets.
Pros
Zero dependencies, tiny bundle size
Works entirely client-side
Easy to set up (just import and configure)
Cons
Slow with large datasets (1000+ items)
No server-side search capability
Use your database's built-in search features (PostgreSQL full-text search, MongoDB text indexes). No external service needed.
Pros
No extra cost or service to manage
Data stays in your database
Works with SQL queries you already know
Cons
Less feature-rich than dedicated search tools
Requires more manual setup for good results
Instead of searching on every keystroke, wait until the user stops typing (usually 300ms). This prevents flooding your server with requests and makes your app feel smoother. Tell AI: 'Add a 300ms debounce to the search input.'
Store active filters in the URL (e.g., /products?category=shoes&sort=price). This lets users bookmark filtered views, share links, and use the back button to undo filters. Tell AI: 'Store all filters and search query in URL parameters.'
What to show when a search returns no results. Display a friendly message like 'No results found for sneakers' with suggestions: check spelling, try different keywords, or clear filters. Never show a blank page.
Show skeleton loaders or a spinner while search results are loading. Users should always know something is happening. A subtle loading indicator above the results grid works well.
Copy-paste these prompts to quickly add search and filtering features to your project.
"Add a search bar that filters products by name and category. Show results as the user types with a 300ms debounce. Display 'No results found' when nothing matches."
"Add sidebar filters for price range (slider), category (checkboxes), and rating (star buttons). Show active filters as removable chips above the results."
"Add a sort dropdown above the product grid with options: Newest, Price Low to High, Price High to Low, and Most Popular. Store the sort selection in the URL."
"Add pagination to my product listing — show 12 items per page with Previous/Next buttons and page numbers. Keep the current page in the URL so it's bookmarkable."
"Add autocomplete search using Fuse.js. Show a dropdown with up to 5 matching suggestions as the user types. Clicking a suggestion navigates to that item's page."
Imagine you're building a recipe app with 100+ recipes. Users want to search by name ('chicken pasta'), filter by category (Breakfast, Lunch, Dinner, Dessert), filter by cooking time (under 30 min, 30-60 min, 60+ min), and sort by newest or most popular. The filters should combine — so 'chicken' + 'Dinner' + 'under 30 min' shows only quick chicken dinners.
Build this with AI
"Build a recipe search and filtering page. Show recipes as cards in a grid (image, title, category badge, cooking time, rating). Add a search bar that filters by title in real-time. Add filter dropdowns for category (Breakfast, Lunch, Dinner, Dessert, Snack) and cooking time (Under 30 min, 30-60 min, Over 60 min). Add sort options (Newest, Most Popular, Quickest). All filters should combine together. Show 'No recipes found' when nothing matches. Use 15 sample recipes with realistic data. Style with Tailwind CSS."
