MudBlazor - Blazor Component Library

API

<MudHighlighter>

Usage

The highlighter can be used in combination with any other component.

Search, appearance

Multiple Highlights

In addition to HighlightedText property which accepts a single text fragment in the form of an string, the HighlightedTexts property accepts an enumerable of strings which can be used to highlight several text fragments.

Names to search

William Jordan

Oliver Jones

William Johnson

Daniel Williams

Oliver Simpson

<MudPaper Elevation="0">
    <MudList>
        <MudListSubheader>
            <MudTextField @bind-Value="searchTerm" AdornmentIcon="@Icons.Material.Filled.People"
                          Adornment="Adornment.End" Immediate="true" Variant="Variant.Outlined"
                          Label="Names to search"/>
        </MudListSubheader>

        @{
            string[] searchTerms = searchTerm.Split(split);
            for (int i = 0; i < searchTerms.Length; i++)
                searchTerms[i] = searchTerms[i].Trim();
        }
        @foreach (var name in names)
        {
            <MudListItem @key="name" Icon="@Icons.Material.Filled.Person">
                <MudHighlighter Text="@name" HighlightedTexts="@searchTerms" />
            </MudListItem>
        }
    </MudList>
</MudPaper>

@code {
    string searchTerm = "William Jordan, Oliver";
    IEnumerable<string> names = new List<string>
    {
        "William Jordan", "Oliver Jones", "William Johnson", "Daniel Williams", "Oliver Simpson"
    };
    static readonly char[] split = new char[] { ';', ',', '.' };
}