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.

Episode summary

In this episode, we tackle improving keyboard navigation for our search results. Up until now, users could type in their query and click on a result, but if you tried to use the keyboard to navigate the results and hit Enter, nothing happened—definitely not ideal!

So, we walk through how to fix this by implementing a getItemURL function for our results. This function simply extracts the URL from the selected item so the search package knows where to navigate when you hit Enter on a highlighted result.

We apply this for both our regular results and our courses, taking advantage of common property names to keep things simple. Once that's done, keyboard navigation just works: you can arrow down to a result and press Enter to go straight to that item's page—way more accessible and user-friendly!

Overall, this little tweak makes searching smoother for everyone, especially those who prefer to navigate with their keyboard.

Episode discussion

No comments, yet. Be the first!