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> }
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>");
Please, sign in to be able to submit a new answer.