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
11. Populating from the query string

Transcript

00:00
Okay, so let's take a look at populating our search input with whatever query is in the query string.
00:06
This could be really useful if you want to link someone to a specific search or someone wants to link to your search and then have this pop down and automatically populate that with whatever they have linked to. So let's head over and take a look at what we can do with this. In fact, before we do that, let's add something to the query string. So I'm going to go ahead and add in a
00:27
search for, let's just say Alex, or let's just do AL just so we have something in there. Now, obviously, this is open because we have that auto open on focus, but the query isn't being populated in here. So how do we do this? Well, inside of here, again, this is just an option that we can add in here, and that is initial state. So in here, we have an object and we have
00:52
an initial query. Simple as that. So I can just type AL and hard code that in there, and sure enough, when we refresh the page, that is in there and it has started to search for what we need. So how do we get this value? Well, there's a couple of ways. You might have a way to do this with your preferred framework, whatever you're using here, but otherwise, we can just say new
01:14
URL window location. So that's going to grab the current location that we're at, and then we go ahead and access search parameters, and we can go ahead and grab this from the URL based on what we've called this. Now, I've called this search, but it could be queue or query. So let's go ahead and add search in there, and that's pretty much what we need to do. So let's head over, give that
01:36
a refresh, and there we go. It is working. So I can search for something else here. That is working. You kind of get the idea, and of course, if it's empty, it's just not going to do anything. So really, really simple addition to this, where we can link people through to specific searches, so we get the results automatically appear that are relevant to that query.
12 episodes1 hr 3 mins

Overview

Using the power of Laravel Scout and Meilisearch, let’s build an instant dropdown search in your Laravel apps.

We’ll start with the basics of indexing data, then use the JavaScript autocomplete library to instantly show results as the user types — even multiple sources at the same time!

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!