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
05. Connecting and getting back results

Episodes

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

Transcript

00:00
So there are two steps to what we're going to do now to switch over our result set from that static set to actually hitting our MeliSearch search engine URL.
00:11
The first thing is connecting to MeliSearch so we can obviously get the results back. And the second of all is switching over the result set to the results we get back.
00:20
Now luckily for us, MeliSearch gives us a couple of plugins that we can use to do this. And we are going to use the autocomplete client here. We're going to install this,
00:31
use this to connect up to our MeliSearch server, and then use this to define the sources within Algolia autocomplete. So let's go ahead and pull this package in.
00:43
So we're going to do an npm install on MeliSearch autocomplete client and just wait for that to finish. So now that's done,
00:54
we can go up to the top and import this. So we're going to go ahead and import two things from this package. First of all, MeliSearch autocomplete client,
01:07
which we're going to use to connect. And second of all, get MeliSearch result, which as you'd imagine, we're going to use to grab the results.
01:17
And we pull these in from MeliSearch autocomplete client. And that should be from. There we go. Great.
01:26
So we've got these two things now. So let's first of all look at connecting to our MeliSearch instance. We can do this from anywhere.
01:33
So we can do this outside on mounted. And we're going to create out a variable here called client. And we're going to new up MeliSearch autocomplete client. And into this, we take two things,
01:44
the URL that we want to connect to, which we already know, because we already have it open in our browser here. And the second thing is our key,
01:50
which at the moment is just our master key. We don't really care at the moment because we're just working locally. So the URL is just going to be this.
01:58
So let's grab this from here and just paste this in. And then for our API key, let's define that out as master key because that's the default.
02:08
So that now gives us a connection to our MeliSearch client that we can start to use. We aren't seeing anything at the moment because we're not using this.
02:18
That is where get MeliSearch results comes in. We're going to swap this over under our sources. So if we head down to our get items part, we're going to get rid of all of that
02:29
because obviously we know that at the moment, we're just doing that statically. So in here, what we're going to do is return and we're going to new up get MeliSearch results.
02:38
Now into this, we need to pass a couple of things. We need to know which client we're using. If you think about it this way, you could have multiple sources
02:46
that come from multiple search engines. So at this level, you can define which client you're actually using. For us, both of these sets of results
02:53
are indexed in the same search engine, but you can have these from multiple URLs if you need to. So we're going to go ahead and define the search client, which is just that variable that we created earlier.
03:04
And then down here, we define out the queries that we want to make here. So this is an array of objects with the index name in there.
03:14
It has nothing to do with the source ID. That's just the unique version of that inside of here. And the queries just take in the index name so we know where we need to actually send this query to.
03:25
That's how users index. So that needs to be the same name as what we have indexed. And then we just need to pass through the query, which we know we've got here.
03:33
And we already used that to come up with a weird solution to test this out. So we just pass the query into here. And that's just shorthand for doing that.
03:41
You can do either. So now we should be hitting the MeliSearch search engine when Algolia's instant search invokes this getItems. And we're performing a search.
03:53
And this will return this as we need. So hopefully everything is good. So let's just give this a refresh and see what it looks like and start typing.
04:03
There we go. Instantly now, we have results from our MeliSearch search engine that we are just seeing on the page.
04:11
So we can just type anything in here. And let's just search for something else. And it all looks good. So we're getting these results back, which is great.
04:20
So while we're here and we've got this data, let's take this a little step further and just start to style up the results that we've got. We are going to be splitting these into multiple categories
04:30
when we look at multiple sources. But for now, let's just take a look at our template just here to see what we can do. So we already know that at the moment,
04:38
we're just returning a single value, which is being put directly into the result set that we see. But what we can actually do here is customize this a little bit more.
04:48
So for example, what we can do is bring in this HTML helper to let us build up HTML as we need to see it. So we're going to go ahead and use that HTML helper in here to go and just output a string of HTML.
05:01
So I'm using back ticks here so we can just add stuff in. So we eventually want this to be an anchor that we can click on. So we can start to write out our anchor inside of here. There are lots of different ways that we can do this.
05:14
But inside of this anchor is going to go the result that we want to see. So let's just pull this down. It's a little bit fiddly in here, but we should see this. So now we just want to output the value that we get back.
05:26
So we'll do this within a span. And let's go ahead and add in here the item name. That's obviously the name of the user. So this depends on the data set that you're actually working with.
05:37
Let's go over and just give this a refresh and start to type. Now these are actually anchors. So if we go ahead and inspect this, you can see that we've got an anchor just with an empty href.
05:47
But we'll swap that over a little bit later when we see to linking through. OK, so what we can also do is include the avatar. So within this anchor, let's go ahead and create out an image here with a source. And we could add an alt in there if we wanted to.
06:01
But let's just keep things really simple for now. And in here, we're going to go ahead and output the item avatar URL. Remember that the data that you index into your MeliSearch search engine is the only data you can access when you're actually searching like this.
06:18
So you can't access stuff that's in your database, because this is purely pulling from your index. So if you needed something else to output, like a user's bio, for example, or any other data, you'd have to index that into your search engine first.
06:32
OK, so now that we've done this avatar URL, let's just check this out. And you can see, sure enough, we have the avatar URL in here now. And that displays. Now, of course, you're going to want to style this up by default,
06:44
because we are working with the Breeze starter kit. This uses Tailwind. So I can just start to add a bunch of classes to this. It really depends on what CSS framework or anything like that you're working with.
06:56
But I can add a width of 8, a height of 8. And I could set this to rounded full if I wanted to. And sure enough, that changes this over really nicely. And we could go ahead and customize the entire structure of this.
07:08
So for the anchor itself, we can go ahead and set this as a flex with items in the center. And we could give a space on the x-axis of 2 to separate the avatar and the name. So if we just give that a refresh, you can see now it's looking a little bit better. But you can add your own custom styles and apply these here if you needed to.
07:28
OK, great. So that is looking really, really good. Of course, it's very, very fast. We have the results that we want.
07:33
And we've basically styled these up. However, we want to include multiple sources here. So let's jump over to the next episode. And we'll look at pulling in our courses and displaying them in this result set as well.

Episode summary

In this episode, we're moving our autocomplete functionality from using a static result set to actually connecting to our MeliSearch search engine and displaying live results. The process begins with installing and importing the @meilisearch/autocomplete-client package, which allows us to easily hook up Algolia's Autocomplete with our MeliSearch backend.

We start by creating a new MeliSearch client with our URL and master key. Once that's done, we replace the old static getItems implementation so it returns results fetched in real-time from our MeliSearch index. We briefly talk about how this setup could handle multiple search engines, but for now, we're focused on a single users index.

Next, we enhance the display of our search results. We switch from basic list items to a more user-friendly UI by injecting avatar images and using anchor tags for each result. We use Tailwind classes (thanks to Laravel Breeze) to style these results, making the search look nice and clean. At the end, we have a search interface that's fast, styled, and pulls live data—much better than our initial setup!

We wrap up by mentioning that in the next episode, we'll expand this functionality to search and display multiple sources, such as courses in addition to users.

Episode discussion

No comments, yet. Be the first!