Dropdown Autocomplete Search Anything in Laravel
This episode is for members only

Sign up to access "Dropdown Autocomplete Search Anything in Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
06. Multiple search sources

Episodes

0%
Your progress
  • Total: 1h 3m
  • Played: 0m
  • Remaining: 1h 3m
Join or sign in to track your progress

Transcript

00:00
as you can imagine, including multiple sources, is pretty much just going to be a case of copying and pasting the source that we defined and just creating another one. And that is the case, but we're also
00:11
going to look at styling these up so they're actually separate, because by default, these are going to kind of look jumbled together, and that's not really what we want.
00:19
OK, so let's go and take the source that we have got here. So that's the user source. I'm going to collapse this, because otherwise it's going to get in the way.
00:28
And we're going to go ahead and just add another object. So remember, that's the getSources array. And we're just going to paste this in at the bottom. So this is now, the one that's open, going to be our courses.
00:38
So let's just start to switch stuff over so we can get this working, and then we'll style this up. So everything else looks the same. We still use the same search client.
00:47
The query, however, is going to be different, because we are now looking inside of the courses index. Really important. And of course, the template is going
00:55
to be completely different as well. So I'm going to go ahead and keep the anchor here. But of course, I'm going to get rid of the image, because we don't have any images for courses,
01:03
although you could. And of course, the data that we're accessing is different as well. This is now going to be the title of the course,
01:10
because the data that we've indexed for courses only has a title. So let's just give this page a refresh and just try this out. I'm going to search A. And sure enough,
01:20
we are now getting our second set of results in there. That is how easy it is with this package combined with MeliSearch to get data from multiple sources. But we want to go ahead and separate these out
01:33
with a header. Now, this can be a little bit restrictive. But again, you can style it up however you want. You can put in different themes for this.
01:40
Let's take a look at how we do that now. So let's start with our courses. Under the Templates section, as well as an item, what we can also define out is the header that we want to use.
01:51
So let's go ahead and use Header here. And again, what we can do is pull in our HTML helper if we want to go ahead and customize this, which we are going to do, like so.
02:03
And then in here, we can just go ahead and output a section here that we want to use. Now, for this, I'm going to use the predefined styles that come with this package.
02:11
But of course, you can completely customize this to do whatever you want. So I'm going to go ahead and create out a span in here. I'm going to use the class names that already exist
02:20
within the styles that we pulled in with this package. And we're going to define this out as class name. So AA and source header title in there. And then in here, we just give the title
02:34
of this, which is going to be courses. And then down here, we can create out a div with a line. So you don't need to do this, but feel free to change this over.
02:43
So the class name here is going to be AA source header line. So you can completely customize this if you want, or just leave it as it is. And let's head over and check out the difference.
02:55
So let's type A. And there we go. We have that predefined style within the Algolia autocomplete package that renders that out for us. So we can do pretty much the same thing now
03:06
by just copying and pasting this over to the users section. So let's go ahead and just collapse this one, open this one. And down where our templates are,
03:15
we can go ahead and pop this in here and change this over to users. And let's go over and check this out. And there we go.
03:22
We've got multiple sources. Of course, the template won't render if there aren't any results, which is really helpful because you don't really
03:27
want a header hanging around there if there aren't any results. And that's it. Now, like I said, you can customize this.
03:33
So let's just have a real quick look at that first of all. So let's just say I wanted to get rid of these two here for the users and instead create out a div in here and say users.
03:45
But I wanted to style this up with Tailwind. Well, that's entirely possible. So for example, let's just be really silly and set a background of blue.
03:53
And we'll set the text to white. We'll set a border on the bottom here of 2, so a height of 2. And we'll set the border to be blue. Or let's bump that up to 800.
04:05
So just as an example, let's have a look. And there we go. Doesn't look great, but you get the idea. You can style this up however you want.
04:12
I'm just going to leave the default in there from the Algolia package. But you now know you can switch that up to whatever you want this to look like.
04:20
So there we go, multiple sources in here. Again, you can style up however you want. Both of these act and look differently through the templates that we've created.
04:28
We can customize the headers, pretty much do anything we want to in here. And you can include more sources, of course, if you need to.

Episode summary

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!

Episode discussion

No comments, yet. Be the first!