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.

Episode summary

In this episode, we're making our search results a lot more user-friendly by highlighting the matching parts of each result. We'll start by diving into one of our sources and editing its template so we can visually see which parts match our search queries.

We'll use a handy pre-built Highlight component from the package we're working with, swapping out our standard text display with this new component. It's super simple — just pass in the item and specify the attribute you want to highlight (like the name), plus you can choose which HTML tag to use for highlighting (the default is an <em> tag, but you can use something else if you want).

Once that's set up, you'll see that as you search, any matches in the results are automatically highlighted. We'll also quickly look at how to customize the styling in CSS, scoping it to just the highlighted items so it doesn't affect anything else on your page. Want to make matched text bold, colorful, or something else? Totally up to you.

To wrap up, we'll apply the same highlight logic to our courses source, and troubleshoot a minor error where we forgot to import the component (easy fix). By the end of this lesson, any search you make will neatly highlight exactly where the results match your input. It’s a small detail but makes a big difference for the user experience!

Episode discussion

No comments, yet. Be the first!