Dropdown Autocomplete Search Anything in Laravel
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
If you need to implement a drop down as you type search in Laravel, this course is going to cover everything you need to know to get set up with that. And this works really perfectly for something like global search,
00:12
where you have a search bar like you can see on the screen here, but as you type this searches from multiple sources. So we're going to cover indexing this data. It could be users, courses, pretty much any data that you can index on your site.
00:29
And then when a user searches, that will look in both of them sources, and of course give you back the results. So let's go ahead and take a look at what this looks like. I've just dumped this on the dashboard here within a Laravel starter kit.
00:40
But of course, you can put this in your navigation or anywhere. And we're using Vue.js here. And this starter kit is set up with Inertia. But don't let that put you off if you're not using Inertia
00:50
and you're maybe just building a front end client with Vue and a back end with Laravel. This is going to work in exactly the same way. So don't worry too much about this being in a starter kit.
01:00
OK, so let's go over to our MeliSearch dashboard first of all. We're going to be using MeliSearch because this is a free open source local search solution. So it's not something that you have to pay for or sign up to.
01:14
You can just install this in your local machine. The beauty of this is once you have done this and you know that everything's working, you can always switch over to a paid solution later.
01:23
OK, so you can see here that we're indexing courses and users. So we've got 1,000 of each here. We want quite a few records to make sure this is nice and fast.
01:32
And you can see the data in the MeliSearch instance just here. Now, when we go ahead and search this, let's just start to type. You can see instantly we get these results back. And these are categorized into two different sections.
01:45
Now, you can style this up however you want. You can also have more than two sources. Once you finish the course, you'll be able to add more sources if you need to.
01:53
And you can just start searching. So as you can see here, I've just typed Alex. We get a few results here with Alex in there. We also have this highlighted as well.
02:01
So the part of the keyword that matches is highlighted. And what we can also do is either click or we can navigate down with a keyboard to select one of these.
02:11
So for example, I'm going to start typing my name. And I'm using the keyboard now to navigate down into the other section. And I can just go ahead and hit Enter on any of these
02:20
or just click on them. So if I go ahead and hit Enter on this user just here, we haven't implemented this page because that's your job. And you'll know what pages you have in your app.
02:30
I'm just dying and dumping the user that we've selected. But you can see here that this just instantly goes through to that page. And then obviously, with that user data,
02:37
you would just build your own page out. And it works the same with the courses as well. So let's click on one. You can see we get exactly the same thing.
02:45
It goes through to the right place and gives the key of that thing that we're trying to find. So although this looks pretty simple, there's a little bit of setup we need to do.
02:55
We need to take this in two parts. The first is get this data indexed into something like Metasearch, which you can easily switch out later if you need to.
03:03
And then we need to figure out a solution to build out the front end to actually read from Metasearch and get these results back in pretty much real time as we start typing.
03:14
So we're going to cover everything you see here in this course. And then, of course, you can expand on this if you need to, add anything else, style it up differently,
03:22
or, of course, just move it to a different location. So let's jump over to the next episode, get everything set up so we're ready to start indexing some data.

Episode summary

In this intro episode, we lay out exactly what we're going to build together: an as-you-type dropdown search for Laravel projects. If you've ever wanted to implement a global search bar (like you see in tons of modern apps) that scans multiple models—say, users and courses—as you type, you're in the right place!

We demo the finished result live: as soon as you begin typing, you get categorized and highlighted results from different sources, all super snappy thanks to Meilisearch. It's completely customizable too—add more sources later, style it to match your app, and make results clickable so users can jump right to them. Keyboard navigation works, and all the boring plumbing (like routing to result pages) is ready for you to hook into your existing flow.

We also chat through the stack: Vue on the frontend, Laravel—and yes, using Inertia, but don't worry, the lessons will work even if you're not using Inertia. Meilisearch is our search engine—free, open-source, and runs locally. Once you know how it fits, you could always switch to a paid solution if you ever need to scale up.

By the end of the course, you'll be able to quickly index your own data, wire up a real-time search UI, and expand it however you like. Next, we'll get hands-on setting up the basics and preparing to index some data. Let's dive in!

Episode discussion

No comments, yet. Be the first!