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.
12 episodes•1 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!

Comments

No comments, yet. Be the first to leave a comment.