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
04. Setting up autocomplete

Episodes

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

Transcript

00:00
So our first goal is to at least get this autocomplete package
00:04
on the page and searching something. At the moment, that's not going to be our MeliSearch data. It's just going to be a list of data that we define. But it's a start, and then we can
00:16
start to introduce the sources that we want to pull back from. So as I mentioned, we're going to be using the autocomplete package from Algolia. Let's go ahead and install this, and then we
00:26
will just start to pull this in. So I'm going to use npm here just to install on this, and we should be good to go. So remember, we need to make sure npm run dev is running
00:37
while we're doing this, and we can get started. OK, so this is the dashboard.view page that we are currently viewing just here. So this is what we're seeing just here.
00:49
Now, like I said, this is using inertia, but all we're going to do here is create our search component and replace it out here with view. So we're not doing anything inertia-specific.
00:58
So let's go ahead and create that component out. We'll just put this in the components folder here, although we have quite a few other components. And I'm just going to call this search.view.
01:07
So this could be like a global search component. So let's start by creating out a template in here, and we'll just put search in there. And then at the top here, let's go ahead and put in our script
01:19
tag so we can start writing out our component script. And we'll just put this on the page. So let's go and say search, and we want to make sure we import this.
01:30
So let's go ahead and import this up here from, and that's under components, and search.view. Great. So we see search on the page.
01:42
That's pretty much what we wanted. All right, so with our search component done, let's head over to that and look at how we start to get this working.
01:50
We've already installed autocomplete search. So let's go ahead and import this first of all, autocomplete. And that comes from Algolia autocomplete.js. Now, what we want to do is have some sort of placeholder
02:04
on the page that this gets injected into. So all of our setup script is going to go up here, and then it's going to be injected into the page. So really, in terms of our template, all we need here
02:15
is a div with an ID or a class or something that we can reference. So I'm just going to call this autocomplete. Obviously, at the moment, it doesn't
02:23
look like there's anything there. But we're going to go ahead and unmount of this component, set this up. So the first thing that we need to do
02:31
is import unmounted from view. So we can call this. And once this component gets mounted, we can go ahead and start to create out the search.
02:41
So as an example, if I console.log mounted in here, we should see mounted in our console. Great. OK, so in here, we want to go ahead and use
02:52
that autocomplete to set this up. So we'll go with a really simple option, first of all, by just going ahead and invoking this. And then inside of here, we just give a bunch of options.
03:03
The first one is really important. It's the container that we want to actually use. And we know that container is hash autocomplete. And maybe we could call that something different.
03:13
Let's just call that search, because we're not actually implementing autocomplete search. So let's take a look at this on the page. And you can see, at the moment, it doesn't look quite right.
03:22
We'll get to that in just a second, because we can style this up. But there are a bunch of other options we can pass through to here, like the placeholder.
03:29
So we could say something like, what are you looking for, for example. And that will go ahead and add that placeholder in there. So when we do click on this, we get this.
03:38
Now, it does look very weird at the moment. But we will adjust that in just a second. And we can also do things like autofocus. So it's worth autofocusing on this
03:47
when the page gets landed on, just so it looks a little bit better. OK, so that's pretty much it for now. Let's talk about the styling of this,
03:56
which is really important. Now, we can configure themes. All of that is in the Algolia documentation. But to start with, we're just going
04:03
to use the classic autocomplete theme from Algolia. So we're going to go ahead and do an npm install on algolia slash autocomplete. And let's just get rid of that, because that's not
04:15
the right one, theme classic. So that's what we want to pull in, Algolia autocomplete theme classic. Once that is pulled in, what we can do
04:25
is import this into our main JavaScript file. And then all of them styles will be applied to this. So let's go over to app.js under Resources and JS. And as well as importing our app CSS file
04:37
to get our standard application styles, we can go ahead and pull in the Algolia autocomplete theme classic. Now, just by doing that, if we head over, sure enough,
04:47
you can see we have an actual theme. We can start typing. And obviously, it's going to render all of that dropdown. OK, now I'm just going to change around the styles of this
04:56
over in the dashboard, because at the moment, it looks a little bit weird. So let's go ahead and just include the padding that we saw before when we got rid of that message.
05:07
So we'll just say p6 here. And let's go ahead and bump that down maybe to 4. OK, that looks good to me. So now what we want to focus on is actually getting some
05:18
results. Now, for now, we're going to hard code these just so we can see what this looks like in terms of building this together.
05:24
And then, of course, in the next episode, we will look at actually pulling these from our MeliSearch search engine. So another option that we can pass through to this
05:33
are the sources of our data. So one of the other options that we can pass through to autocomplete is getSources. Now, eventually, this is going to become our source pulling
05:45
this data back from MeliSearch. But for now, what we're going to do is just add a single source inside of this array, which is just hard-coded data.
05:54
So we'll just see how this fits together. So let's create an object out in here for our first source. And we're going to go ahead and give this a source ID. And we'll just call this users for now.
06:04
We'll just play around with this data. Now, in here, because we're doing this manually, we're going to go ahead and include a getItems function. And into here, we get the query that we typed.
06:15
Now, into here, we kind of want to return a set of results. Now, for now, I'm just going to return an empty array. And let's go ahead and console log out in here the query that we get back.
06:25
So step one, define our sources inside of this array. So we can have multiple sources in here, which we're going to be looking at later. We give each source a source ID.
06:35
And then we define what these items are. At the moment, that's just an empty array. So let's just see how this looks on the page. I'm going to go ahead and bring up the console.
06:43
And I'm just going to start typing. So obviously, we get a couple of errors here because we don't have any results. We've not defined our template for this.
06:49
That's fine. But you can see, as I started typing, it's console logged out A, which is great. So let's go over and let's actually
06:58
return some data in here. So I'm going to go ahead and create out a bunch of items in here within an array. So just imagine that these come from the source
07:06
that we're working with. Now, in here, we're going to go ahead and just define the data that we need. So let's say ID of 1.
07:12
Let's say name Alex. And we'll just leave it at that for now. So let's go ahead and duplicate this down and have Mabel in there as well.
07:21
And now, with this array, we need to search within these items. So let's say items filter. And then in here, we will get our name out of there.
07:31
We'll assume that's what we want to search on. And then we're going to go ahead and say name to lowercase because we want to make sure that the search works with just a standard case.
07:42
And then we're going to say include. So we're just writing pure JavaScript here. And then we're going to go ahead and grab the query, set that to lowercase, and we should be good.
07:52
Let's just make sure we invoke that. So basically, look in these items, extract out the name, and see where these items match the name that we're typing in with the query.
08:02
Obviously, this isn't what we're going to end up with. But let's see if this works. So I'm going to type A in here. And yeah, so we get no results.
08:11
That's absolutely fine for now because we're just going to go ahead and add in our templates. That's another part of the sources. We need to define how these look.
08:18
Multiple sources can look different. So just below where we're grabbing these items, we'll fix up this search functionality in a minute. We're going to define out the templates that we want to use.
08:28
So for this, we're going to go ahead and choose our item template. That will give us the whole item back. So it will give us the whole object back.
08:36
And with this, we can just return the data that we need, whether that's HTML or whatever. So in our case, we'll just say item.name because we want the user's name to show.
08:45
So define out a way to grab the items. Define out our template. We shouldn't see this error now. So let's type A. And there we go.
08:53
Sure enough, it's working. The error that we saw before is just because we hadn't defined out our template. So obviously, A exists within both of these results.
09:01
But if we start filtering this down, you can see, sure enough, it's just working. And we can do the same for Mable as well. So we've got a static source here that is now working.
09:09
And that should give you a good idea as to how this package works. Define your sources. Define how you're searching, which
09:16
is eventually going to come from our MeliSearch search engine. And define how we want these results to look in the actual dropdown itself. All right, so now that we have a good idea about how
09:27
this package works, let's head over and actually switch the source over to read from our MeliSearch search engine so we actually get relevant results to the things that we've indexed.

Episode summary

In this episode, we're kicking things off by setting up the autocomplete feature using Algolia's autocomplete package. We're not connecting it to MeliSearch just yet—instead, we'll start small and use some hardcoded data to make sure everything is working smoothly before we plug in the real search backend.

Here's what we do step by step:

  • We get the autocomplete package installed and start wiring it up in our project. If you haven't already, make sure your dev server is running while you install things!
  • We create a new Search.vue component where all the autocomplete logic will live. We set up a placeholder in the template for the autocomplete to attach to.
  • We bring in the Algolia autocomplete.js and set it up inside the new component, connecting it to our placeholder element.
  • To make things look a bit nicer, we also pull in the classic autocomplete theme from Algolia and add it to the project's main JavaScript file, so it styles our search box out of the gate.
  • Now we dive into the cool part: configuring sources. At first, we just set up a basic source using a hardcoded list of users so we can see how the autocomplete dropdown works. We learn how to filter these results as we type and how to control how each item is shown in the results list.

By the end of the video, we have a working autocomplete UI with static data, and we've covered the basics of how the Algolia autocomplete package expects sources and templates to be set up. This groundwork is crucial—we'll leverage all of this in the next episode, when we connect the autocomplete to our MeliSearch backend to get real, dynamic search results!

Episode discussion

No comments, yet. Be the first!