In this episode, we step up our autocomplete game by adding multiple search sources. Instead of just searching through users, we add a second source—courses! It’s mostly a matter of copying over the setup for the user source and tweaking it for courses. The main things to change are the query (so it looks in the course index) and the template (we only have a course title to show).
Once our multiple sources are working, we notice everything looks kind of mashed up together—a bit confusing for users. So, we add headers for each source (like “Users” and “Courses”) to make it clear which results belong where. We use the built-in styling to keep things simple, but you’ll see how easy it is to completely customize these headers, including with TailwindCSS if you want to get fancy.
Finally, we test it all out and show a few tweaks you might want for your own project. Now you know not just how to display results from multiple sources, but also how to make them look good and easy to understand for your users!