Highlight Search Blazor AutoComplete Component

18 Dec 20244 minutes to read

You can highlight the search text in the suggested list items of the autocomplete component by using the Highlight property. When set to true, it will highlight the characters that match the search query in the list items.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Highlight="@Highlight">
    <AutoCompleteFieldSettings Value="Name" />
</SfAutoComplete>

@code {

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Country> LocalData = new List<Country> {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
        new Country() { Name = "Denmark", Code = "DK" }
    };

    public bool Highlight { get; set; } = true;
}

Highlight with template

You can highlight the search text in the suggested list items of the autocomplete component by using the HighLightSearch method. It accepts several arguments, including textValue, ignoreCase, filterType and highLightText. When called, it will highlight the characters that match the search query in the list items.”

• textValue - The text to be highlighted in the list item.
• ignoreCase - A boolean value which when set to true performs the search text based on casing.
• filterType - Determines on which filter type the highlight text is updated on the text.
• highlightText - The text to be highlighted. This is an optional argument. If not provided, it will use the filter value as the highlight text.”

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfAutoComplete @ref="@AutoCompleteObj" TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Name" />
       <AutoCompleteTemplates TItem="Country">

        <ItemTemplate Context="icontext">

            <div class="samplename"> @((MarkupString)AutoCompleteObj.HighLightSearch(icontext.Name, true, Syncfusion.Blazor.DropDowns.FilterType.Contains))</div>

        </ItemTemplate>

    </AutoCompleteTemplates>
</SfAutoComplete>

@code {
    SfAutoComplete<string, Country> AutoCompleteObj;

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Country> LocalData = new List<Country> {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
        new Country() { Name = "Denmark", Code = "DK" }
    };

}

Change the highlight style

You can customize the appearance of highlighted text using the .e-highlight class. In the example below, we have styled the background color for the highlighted text.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Highlight="@Highlight">
    <AutoCompleteFieldSettings Value="Name" />
</SfAutoComplete>

@code {

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Country> LocalData = new List<Country> {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
        new Country() { Name = "Denmark", Code = "DK" }
    };

    public bool Highlight { get; set; } = true;
}

<style>
    .e-highlight {
        background-color: yellow;
    }
</style>