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

Episodes

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

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.

Episode summary

In this episode, we walk through how to automatically populate your search input based on the query string in the URL. This is super handy when you want to link directly to a specific search and have it load up for the user right away, making your search experience more sharable and user-friendly.

We'll first add a search query like ?search=AL to the URL and check out how, by default, our input isn't picking it up. Then, we introduce the concept of using an initialState option in our UI, and hard code a value to demonstrate how it works.

To dynamically grab whatever's in the query string, we use JavaScript to fetch the relevant parameter (like search, q, or whatever you call it) from the URL. With just a couple of lines, we wire it up so any query in the URL gets pulled into your search input automatically. Finally, we see it in action: the search box populates and displays results for whatever was typed into the link, or just stays empty if nothing was specified. Super simple, but really powerful for sharing searches!

Episode discussion

No comments, yet. Be the first!