MOSS 2007: Customizing the Search Results Page (XSLT) - Part 2 - Add highlighting

1 Sep 2007

💡TIP: Check out the Migration guidance in the Cloud Adoption Framework!

In one of my previous blogposts I wrote about how you easily could alter the XSLT of a the Search Core Results Web Part on your Search Results Page in order to achieve a customization to the presentation of the output.

In this article I will scratch on the surface of some more XSLT and show you how you can implement the HitHighligting Template in order to achieve colored/customized display of the search words you entered.

What is the HitHighligting Template?

Well, basically the HitHighligting template offers you the ability to highlight words that are used in your search. It offers you the possibility to highlight words in the following three result sections: Title, Url and Description (And that’s basically all you need, mostly)

Study the following XSLT, as per MSDN:

<hithighlightedsummary>
  Converting <c0>Office</c0> Word and <c0>Office</c0> Excel Forms to <c0>Office</c0> InfoPath
  <ddd /> Converting <c0>Office</c0> Word and <c0>Office</c0> Excel Forms to <c0>Office</c0> InfoPath
  <ddd /> Ways to convert an <c0>Office</c0> Word to <c0>Office</c0> Infopath-
</hithighlightedsummary>
<hithighlightedproperties>
  <HHTitle>
    Converting <c0>Office</c0> Word and <c0>Office</c0> Excel Forms to <c0>Office</c0> InfoPath.doc
  </HHTitle>
  <HHUrl>
    http://ServerName/personal/avinash_a/Shared Documents/Converting <c0>Office</c0> Word and <c0>Office</c0> Excel Forms to <c0>Office</c0> InfoPath.doc
  </HHUrl>
</hithighlightedproperties>

You may notice that the sections hithighlightedsummary, HHtitle and HHUrl elements contain child elements <c0>, <c1> , ... . This basically means that for each instance of the words entered in your search, you get a set of highlight-tags that encloses that word. This is the default behavior of the SharePoint Search. First word gets <c0>, second word gets <c1> and so on…

How do I add the Highlighting functionality?

Note: If you do not know how to access the XSLT of the Search Core Results Web Part, view my previous post on the subject.

In order to customize the presentation of the search result and make your words highlighted, you basically only need to add some tags to the XSL-template for each search word you want to highlight as you can see in the screenshot below.

Now locate the following section in your Search Core Results Web Part (It already exist):

And since this template exists from the beginning, all you really have to do is to customize the style attribute and add a color property of the **** tag (I replaced it with a **** tag instead, for sake of standards)
Then you can simply specify the styles for each highlighted word as picted in the following screenshot: