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!