Adding Search Highlighting0:03
All right, welcome back. So now let's take it one step further and I would like to add highlighting to my results. Alright, so let's do this once again, let's return the results and yet for now we're gonna keep it again, very simple. We're only going to query by the title. Alright, so now if I give it a refresh, you'll notice for the hits in addition to document, we also have these two sections for highlighting.
for the hits in addition to document, we also have these two sections for highlighting. So here's one and here's another. And these are just different ways to access the same highlighted, uh, or marked search result. The only difference is with highlight, you have an object, uh, that is keyed by the field that received the highlight, whereas in the next one you just have an array of objects. So yeah, if you think about it, what we could do is say, all right, I want to pluck the highlights right here,
Plucking Highlight Results0:45
So yeah, if you think about it, what we could do is say, all right, I want to pluck the highlights right here, and that's gonna give us all of these for each matching result. So if we were to move return results down here, again, we're just gonna review this incrementally. Now this is what we get. Okay? But once again, we can take this further. All I really care about in this example is
Flattening Highlight Arrays1:06
But once again, we can take this further. All I really care about in this example is the matching snippet. So let's do this because highlights is an array of arrays. Why don't we flatten it, but not all the way. Let's just do one level of flattening. So now if I give it a refresh, yeah, this is what we want. So notice if I didn't pass 1 here, it's gonna flatten everything. Uh, and that's not what I want.
Extracting Snippet Text1:26
it's gonna flatten everything. Uh, and that's not what I want. Just a single level of flattening. All right, so then finally we have these objects where I can, um, finish up by plucking the snippet itself, pluck snippet, and that's gonna give us everything we need here. Alright, so now once again I have an array of the matching titles, but this time we have proper highlighting.
of the matching titles, but this time we have proper highlighting that is based upon, uh, your search query. So if I change this once again to matter, you'll see any reference to matter is going to be wrapped within <mark> tags that I can then style however I want. Alright, let's send it to the view, come back, give it a refresh. And now we're seeing the full HTML
Rendering Highlighted HTML2:05
come back, give it a refresh. And now we're seeing the full HTML because we're escaping it. But yeah, it's perfect. It's exactly what we want. So let's switch to the view and update this right down here. We'll say, um, without escaping, I want the full HTML here. Display the result, come back, give it a refresh. And again, we have some default highlighting here that will take any mark tag and add a yellow background, which is often what you want.
Testing Typo Tolerance2:27
that will take any mark tag and add a yellow background, which is often what you want. Let's try it out Harry. Very good project wizard. Uh, and yeah, notice in this case, even though I spelled it wrong, we have type sensitivity with type sense and it knows, eh, this is probably what you are looking for. So it can account for that, which is cool. Are you, we're working incrementally, so we've made one more improvement in the next episode.
Are you, we're working incrementally, so we've made one more improvement in the next episode. Let's take it even further. I'll see you then.
