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
09. Highlighting 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 when we're searching for stuff, we kind of want to see these results highlighted. And this is actually very, very easy to do with this package.
00:08
So let's head over to one of our sources. And let's come down to the template where we're actually outputting the item itself. And this is the thing that we want to highlight.
00:19
Now, when we grab these items, we have a list of components, pre-built components, within this package that we can use. And one of them is to highlight our results.
00:30
So we're going to go and swap out this. This is for the user, so we'll do implement that first and then come back to this. We're going to swap this out with the output
00:39
of this highlight component. So in here, we're just going to go and output components. Highlight, that's the component that we're using. And then inside of here, we just go ahead
00:50
and give a bunch of options. So the hit here is the item itself. So we just pass that entire item in. And then we have the attribute that we want to highlight.
01:01
So in our case, that's just going to be the attribute that we are outputting, and that's the name. And then we have a tag name that we can specify.
01:09
So usually, this is M for emphasis, but of course, you can change this around. So that's pretty much all we need to do to get these results highlighted.
01:17
Let's go over and just start to search. And you can see, if I search for one of these, you can see that this part of it has some emphasis for CSS with that default styling with the M tag.
01:30
Now, of course, we can customize this. So we can head over to app.css and change this around here if we need to. So we're going to kind of scope this into the AA item, which
01:40
is the class that is applied to any of the items that we have within this package. And we're going to say M, because we don't want this to be a global style
01:48
and interfere with anything else. And then we can just use apply in here if we're using Tailwind, or you can just write normal CSS and maybe just make this bold.
01:56
So let's just go with that for now. So if we head over now and just start to type something, you can see that that style has been applied within the scope of that item.
02:04
And of course, you can style this up to do whatever you want. OK, let's go ahead and finish up by applying this same approach to our courses. So let's go up here and shut off this source.
02:17
And it's open here. And again, it works in exactly the same way. We just want to replace out this item title in here with this highlight component.
02:28
And that is now going to become title. So let's hop over, try this again. And it looks like we've got an error. That's just because we didn't put in our components in there.
02:40
And let's search. And there we go. So let's try and search for something else. And there we go.
02:46
All of these parts where there is some sort of match, get highlighted. Brilliant. So that is result highlighting done.
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!