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
12. Submitting the search form

Episodes

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

Transcript

00:00
OK, let's have a look at what happens when we submit this form. Now, obviously, at the moment, we have an instant search where we can just start typing and we see the results. But what happens if we do type something in and we hit Enter?
00:12
Well, at the moment, not much. It just closes off. Now, we've got a couple of options here, depending on how you wanted this to work.
00:19
Let's go ahead and get this event in here first, and then we'll look at a couple of options. So we can go ahead and use onSubmit here, which is, as you'd imagine, a method that does something
00:31
once this is submitted. So let's just console.log this out and say Submit. And let's go ahead and pull up our console and just type something in and hit Enter.
00:41
You can see, sure enough, we get that console logged out. So we can hook into this submit event to do things we need to do. Now, into this, we actually get our state.
00:50
So let's take a look at what we have in here. And again, console.log that out. Come over and type something in, and here we go. So we get access to our query.
01:01
So what you could do, if you wanted to, is just go ahead and refresh this page. So you could, when someone hits Enter, refresh the page, add this to the query string,
01:13
and then you've got a result with this query prepopulated that will open up again when the user lands back on the page. Now, let's go ahead and also pull in the navigator here, because this is a convenient API
01:27
for us to navigate around here. So we can say navigator and navigate. And then when we invoke this, we just give the item URL in here.
01:36
So we can just build this up how we want. So for example, we could say dashboard slash, and then we could add in the search query directly from our state just in here.
01:47
So that would just refresh the page. Let's go over and just try this out. I'm gonna type in Mabel, hit Enter. That's gonna refresh the page,
01:56
put this in the query string, and now we have something that automatically opens with that in the query string. Now, that's not really what we would tend to do.
02:05
What we would tend to do is redirect over when the user hits Enter to a dedicated search page. Remember that this functionality is something that you would have in your navigation,
02:15
but you might want a dedicated search page that people can land on and see a list of results. Now, we're not gonna go ahead and implement that because that's just a completely different thing
02:23
depending on how you're building your app, but let's take a look at how that would work. So we would switch this over to a dedicated search page, and we would go ahead and create that page out.
02:33
Now, again, I'm not gonna do this in any specific inertia way or anything like that. I'm just gonna create out a really basic forward slash search page.
02:42
I'm gonna bring in our request in here so we can actually access that, and then I'm just gonna die dump on request and search. And obviously, you can just build that page up
02:51
however you want. We'll just give it a name here and call it search index. You can build this page up however you want and show a list of results if you wanted to.
03:00
So now when we go ahead and type in a search query, we get redirected over to a dedicated search page with that query in there, and then you could list out some results.
03:10
And this might be a good idea if you wanted to introduce some search engine optimization for searches to be indexed in search engines, because obviously with the solution we've got at the moment,
03:21
this is all rendered out as we type from JavaScript and search engines are just not gonna be able to index this. So at least now, depending on what you want to do,
03:30
you know that on submission of this, you've got access to the state. So if you're using inertia, for example, you could go ahead and push to the query string
03:38
with inertia, redirect to a different page. But if you just wanted to navigate over and do a hard refresh on another search page, then you can do what we've done here.

Episode summary

In this episode, we dig into the behavior that happens when users submit the search form, not just type into it. Originally, our search was "instant search" style, updating results as the user typed. But what about when someone presses Enter after typing in a query?

We start by adding handling for the form's onSubmit event, log out when a search is submitted, and inspect the available state to grab the current search query. Then, we experiment with refreshing the page and adding the search query to the URL's query string, which means if someone refreshes or leaves and comes back, their search is preserved.

After that, we introduce using navigation APIs to send users to new URLs when they submit, like a dedicated search page, not just staying in place. This lets you build a more traditional search result page—handy if you want separate, indexable search result pages (good for SEO), or if you want a search page experience more similar to popular sites.

We also touch on how you might adapt this whether you're using classic navigation, frameworks like Inertia, or your own flavor—basically, you get to pick if you want to update the search results instantly, redirect to a new page, or both. The choice is yours, and now you know how to hook into the form submission to do it!

Episode discussion

No comments, yet. Be the first!