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
08. Keyboard navigation

Episodes

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

Transcript

00:00
Because at the moment, we can link through to our results by typing something and clicking on it. But we really want this to be included
00:07
in keyboard navigations. When we navigate down and hit the Return key, at the moment, it just closes off our results. So how do we resolve this?
00:16
Well, there's something that we can implement within our results. So let's go down here and just put this in between the sources and the template. And this is getting the item URL.
00:26
So let's go ahead and implement getItemURL. Now, into here, as you'd expect, we get through the item itself. So we can actually extract the URL out from this.
00:36
So let's go ahead and pull out the item here. And then we just want to return the item URL. So let's go ahead and say return item URL. Now, this is for our users.
00:45
So let's just see the difference that this makes. Let's head over now and type something, head down and hit Enter. And there we go.
00:52
So what's going to happen is, with this package, when you do define the item URL, that's then going to hook into the keyboard event when we hit Enter after we've highlighted something
01:05
by navigating down with the keyboard. So this isn't working for courses at the moment. But we can just go ahead and grab this, close this source off, and open this here, and do exactly the same thing.
01:17
And because we have a common property name, we don't need to change anything about this. So let's just verify that this is working for our courses as well.
01:25
And there we go. Keyboard navigation for this kind of stuff is super important. So just including that method in there
01:31
to let this package know what the URL is that should be going through to really, really helps with clicking, navigating with a keyboard, and just hitting Enter.
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!

Episode discussion

No comments, yet. Be the first!