Smart Search Keyword Highlighting

Summit Pump asked on November 21, 2023 23:07

I am creating a search function for my website and would like to have similar functionality that the index search preview has on the admin site for Xperience 13. The search preview highlights the keyword that resulted in it being found and I would like to do something similar in my code. I found a helper function called SearchHelper.Highlight but don't really know how to use it. My search controller and view code is down below.

public class SearchController : Controller
    { 
        public ActionResult Index(string SearchValue)
        {
            if (string.IsNullOrWhiteSpace(SearchValue))
            {
                // Creates a model representing empty search results
                SearchViewModel emptyModel = new SearchViewModel
                {
                    SearchItems = new List<SearchResultItem>(),
                    SearchValue = String.Empty
                };

                return View(emptyModel);
            }
            var condition = new SearchCondition(searchMode: SearchModeEnum.AnyWord, searchOptions: SearchOptionsEnum.NoneSearch, fuzzySearch: true);
            var searchExpression = SearchSyntaxHelper.CombineSearchCondition(SearchValue, condition);
            var searchParameters = SearchParameters.PrepareForPages(searchExpression, new List<string> { "SiteSearch_Pages" }, 1, 100, MembershipContext.AuthenticatedUser);
            var Search = SearchHelper.Search(searchParameters);
            SearchViewModel Model = new SearchViewModel()
            {
                SearchValue = SearchValue,
                SearchItems = Search.Items
            };
            return View(Model);
        }

    }
}

@model SearchViewModel

@using CMS.Search;
@using CMS.DocumentEngine;

@if (!Model.SearchItems.Any())
{
    if (!String.IsNullOrWhiteSpace(Model.SearchValue))
    {
        <div class="row m-4 justify-content-center">
            <h3>No results found for "@Model.SearchValue"</h3>
        </div>
    }
    else
    {
        <div class="row m-4 justify-content-center">
            <h3>You must enter a search term</h3>
        </div>
    }
}
else
{
    <div class="row m-4 justify-content-center">
        <h3 class="col-lg-9 page-header">Results for "@Model.SearchValue"</h3>
    </div>
    <div id="searchResults" data-current-page="1" aria-live="polite">
    @foreach (var item in Model.SearchItems)
    {
        <div class="row m-4 justify-content-center">
            <div class="col-lg-9">
                <meter class="float-left mt-1 mr-1" min="0" max="1" value="@item.Score">@item.Score</meter>
                <a href="@item.Data.GetValue(nameof(TreeNode.NodeAliasPath))"><p>@item.Title</p></a>
            </div>
        </div>
    }

Recent Answers


Juraj Ondrus answered on November 22, 2023 12:30

In the SearchResultItemModel for each result there is a Content property. To highlight the content, you can add the Highlight method like this:

Content = SearchHelper.Highlight(resultItem, resultItem.Content, "<b>", "</b>");

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.