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
07. Clicking through on results

Episodes

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

Transcript

00:00
So everything is looking good here when we type stuff out. But there is one issue. We can't click these to actually go anywhere. At the moment, when we click them,
00:09
we just end up back on the same page because we have an empty anchor with no href. So what we're going to do now is take a look at how we can link these up to a page.
00:20
Now, we don't have any pages to show this data just yet. But let's go over to our web routes. Just create one out here. We're not going to do this with inertia
00:28
because I don't want this to be inertia specific. So I'm going to go ahead and create out a get route here for both our users and our courses. So this will be something like users.
00:37
And then we'll use route model binding to grab the user. And then inside of here, let's grab the user that we get through with route model binding. And let's just die dump on that user
00:49
as we saw from the introduction. So we're just keeping this really, really simple. But of course, you can build out the pages for the actual results themselves.
00:57
So we're going to do the same thing here for our courses. And of course, we'll get a course in here. We'll get a course in here. And we'll call that course.
01:08
And there we go. Now, we're going to name these so we can easily reference them. So I'm going to call this just users.show, for example.
01:17
And we can do the same thing for our courses as well. Courses.show. Now, the thing about this is, if we were to, over in our search, do something like this,
01:29
so I don't know which one this is. It's the users. We could do something like users slash, and then we could take the item ID, which is the user ID.
01:40
And this would work. So let's just have a real quick look at this. If I click on one of these, we go through to the right page.
01:45
So this is working as we would expect. But the only problem is, if this URL changes, we kind of want this to be referenced by name. Now, we can't do this here
01:56
because we can't necessarily reference something by name within our component. We can do that with inertia, but again, we're going to look at how we can do this
02:04
and index the URL instead. So we can just reference this directly in here, but you can do really whatever you like. Let's go over to our user model,
02:14
and we're going to add the URL for this into here. So we're going to use our root helper. We're going to say users.show, and this URL will link to this model
02:25
with root model bindings, so we can just use this. And we can do the same thing over in our course as well. So let's go down here, put this in here, and say courses.show, and again, reference this.
02:37
So now what we can do is re-index everything. So let's use Scout to import our user, and let's do the same for our course as well. And we'll just verify that this data is inside of here.
02:47
Sure enough, it is, and it links through to the right place. So now we can just reference the URL. Now, there is one problem with this solution,
02:55
and that is if your URLs change for your courses or your users or any other data you're indexing, you are going to have to re-index all of this data. So if you are using Inertia,
03:06
you could just link through using the root helper with Ziggy. If you're an Inertia developer, you'll know what that is, but otherwise, this solution is probably the best
03:15
because it just allows you to define this in one place, and if it changes, you just have one place to change it rather than fiddling around with your code. So in here now, we can just go ahead
03:25
and add this into this href. So we're gonna say item URL, and we can do the same thing for our course as well. So let's just close this one off, open this one out,
03:36
and we'll go down to here and say item URL. So we've got a common property that exists for all of the things that we are searching on. So let's try this out.
03:48
I'm gonna click on one of these users. Works nicely. And let's go ahead and choose one of these courses, and again, goes through to the correct place.
03:56
So this is a good strategy if you're just building out a simple view component within an app. If you're using Inertia,
04:02
you can use your root helper like you normally would to go through to this particular location. But I think this is absolutely fine. It's very rare that your URLs will change.
04:13
So as long as they're in there, you can just really quickly reference them directly from your search results. And then of course, link the user through to the right page.

Episode summary

In this episode, we address an issue with our search results: although we can see the results on the page, clicking them doesn't actually take us anywhere yet! At the moment, the links are just empty anchors, so when you click them, you just reload the same page.

We walk through the process of wiring up actual pages to view each user or course result. Even though we don’t yet have detailed profile or course pages built out, we create some simple routes using Laravel’s route model binding to quickly show how to display the user's or course’s info when you click a result.

After setting up the “users.show” and “courses.show” routes, we talk about the best way to reference these URLs from our search results. Instead of hard-coding the route paths, we add a URL attribute directly to the user and course models using Laravel’s route helper. This way, any time we want the link to a user or course, we can just grab the URL property. If you’re familiar with Inertia, you’d maybe use Ziggy or root helpers for this, but this approach keeps things universal.

There is a quick heads-up: if you ever change your URL structure, you’ll need to re-index your data. But overall, this solution is clean and keeps things in one place. We finish up by plugging these new URL properties into the hrefs of our search results, and after a quick test – it all works! Now clicking a search result takes you to the right page, making our search far more useful.

Episode discussion

No comments, yet. Be the first!