Allow distinct styling of matching characters

Right now, the entire result is placed in a div. Given the example template:

        <ResultTemplate>
            @context.Title (@context.Year)
        </ResultTemplate>

, a result div might be:

<div class="blazored-typeahead__result ">
  "The Shining"
  "(1977)"
</div>

If I searched for Shi, I would like the following instead:

<div class="blazored-typeahead__result ">
  "The "
  <span class="blazored-typeahead__result_match">
    "Shi"
  </span>
  "ning"
  "(1977)"
</div>

I could then supply styling information for that class and make matching characters bold, underline, or similar:

.blazored-typeahead__result_match
{
    font-weight: bold
}

Similar Stack Overflow discussion

[vertonghenb]

It’s possible to get the searchvalue each time the searchmethod is triggerd. CAUTION Some very RAW code examples here, but I think you’ll get the point:

    private string searchTextCopy;
    private async Task<IEnumerable<Person>> GetPeopleLocal(string searchText)
    {
        searchTextCopy = searchText;
        return await Task.FromResult(People.Where(x => x.Firstname.ToLower().Contains(searchText.ToLower())).ToList());
    }

then you know the searchtext and you’re able to use it in a renderfragment for your resulttemplate

<BlazoredTypeahead SearchMethod="GetPeopleLocal"
                   @bind-Value="SelectedPerson"
                   ShowDropDownOnFocus="true"
                   placeholder="Search by first name...">
    <SelectedTemplate Context="person">
        @person.Firstname
    </SelectedTemplate>
    <ResultTemplate Context="person">
        @((MarkupString)person.FullName?.HighlightKeyWords(searchText,"yellow",false))
    </ResultTemplate>
</BlazoredTypeahead>

Caution, I stole this code from somewhere, I didn’t battle test it at all.

    public static class Extensions
    {
        /// <summary>
        /// Wraps matched strings in HTML span elements styled with a background-color
        /// </summary>
        /// <param name="text"></param>
        /// <param name="keywords">Comma-separated list of strings to be highlighted</param>
        /// <param name="cssClass">The Css color to apply</param>
        /// <param name="fullMatch">false for returning all matches, true for whole word matches only</param>
        /// <returns>string</returns>
        public static string HighlightKeyWords(this string text, string keywords, string cssClass, bool fullMatch)
        {
            if (text == String.Empty || keywords == String.Empty || cssClass == String.Empty || text is null)
                return text;

            if (keywords is null)
                return text;
            var words = keywords.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
            if (!fullMatch)
                return words.Select(word => word.Trim()).Aggregate(text,
                             (current, pattern) =>
                             Regex.Replace(current,
                                             pattern,
                                               string.Format("<span style=\"background-color:{0}\">{1}</span>",
                                               cssClass,
                                               "$0"),
                                               RegexOptions.IgnoreCase));
            return words.Select(word => "\\b" + word.Trim() + "\\b")
                        .Aggregate(text, (current, pattern) =>
                                   Regex.Replace(current,
                                   pattern,
                                     string.Format("<span style=\"background-color:{0}\">{1}</span>",
                                     cssClass,
                                     "$0"),
                                     RegexOptions.IgnoreCase));

        }
    }

Which results in:

[chucker]

Any of you created a some production code for this?

Nope. Haven’t had a chance to look into this for now.

The issue is that we do not have control over the templates provided by the client.

One approach might be to add an out IRange[] highlightedCharacterRanges parameter to the expected SearchMethod.

I’m not sure this would work well for complex ResultTemplate scenarios, though.