Highlighting search terms in results

Highlighting the searched terms in your portal search results enhances user experience and helps users quickly identify relevant content. This is commonly used in global search implementations, FAQs, or knowledge article pages in Power Pages.

Step-by-Step Guide to Highlighting Search Terms

Step 1: Capture the Search Term from URL or Input

Assume the user inputs a search query through a form or directly in the URL using a search parameter.

Example URL:
https://yourportal.microsoftcrmportals.com/global-search?search=power

In Liquid, capture the parameter:

{% assign searchTerm = request.params['search'] | escape %}

Step 2: Perform a FetchXML Search

Search across one or more entities (like Articles, FAQs, Products):

{% fetchxml articleResults %}
<fetch top="10">
  <entity name="knowledgearticle">
    <attribute name="title" />
    <attribute name="content" />
    <filter>
      <condition attribute="title" operator="like" value="%{{ searchTerm }}%" />
    </filter>
  </entity>
</fetch>
{% endfetchxml %}

Step 3: Render the Results with Highlighting

Since Liquid alone doesn’t support inline text highlighting, you will use Liquid to output the search term and JavaScript to apply the highlight dynamically.

HTML Output with a Hook for JavaScript:

<div id="searchResults" data-term="{{ searchTerm }}">
  <h3>Articles</h3>
  <ul>
    {% for item in articleResults.results.entities %}
      <li>
        <strong class="highlight-target">{{ item.title }}</strong><br />
        <span class="highlight-target">{{ item.content | truncate: 150 }}</span>
      </li>
    {% endfor %}
  </ul>
</div>

Step 4: Add JavaScript to Highlight Terms

Below the results, include this JavaScript to wrap the matched words in a <mark> tag.

<script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('searchResults');
    const term = container.dataset.term;
    if (!term) return;

    const regex = new RegExp(`(${term})`, 'gi');
    const targets = container.querySelectorAll('.highlight-target');

    targets.forEach(el => {
        el.innerHTML = el.textContent.replace(regex, '<mark>$1</mark>');
    });
});
</script>

This highlights all matches in the results using the <mark> tag, which gives a yellow background by default.

Step 5: Style the Highlight (Optional)

You can customize the highlight style via CSS:

<style>
mark {
  background-color: #fffd38;
  padding: 0 2px;
  font-weight: bold;
}
</style>

Bonus: Support Multiple Search Words

If users might input multiple keywords (e.g., power pages security), split and highlight them all:

Update the JavaScript:

const terms = term.split(' ').filter(Boolean);
const regex = new RegExp(`(${terms.join('|')})`, 'gi');

Security Consideration

Avoid using .innerHTML with untrusted user input directly. In Power Pages, the risk is lower because the content is already retrieved via FetchXML and escaped, but be mindful when extending this technique to user-generated content.

Use Case Examples

Global Search results with keyword highlighting
FAQ sections with live search
Knowledge articles matching specific terms
Personalized search summaries