Custom Highlight Search in ASP.NET CORE AutoComplete

27 Aug 20261 minute to read

The AutoComplete has built-in support to highlight the searched characters on suggested list items when the highlight property is enabled. The highlight property is a boolean value that defaults to false. When enabled, the AutoComplete wraps the matched characters in the suggestion list with the e-highlight class, which you can then customize through CSS.

The following sample enables the highlight property to highlight the matched characters in the suggestion list.

@using AutoCompleteCustomSample.Models;
@{
    var data = new Countries().CountriesList();
}
<div id='iconList' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        <ejs-autocomplete id="country" dataSource="@ViewBag.data" highlight="true" placeholder="Select a social media">
            <e-autocomplete-fields value="Name"></e-autocomplete-fields>
        </ejs-autocomplete>
    </div>
</div>

View Sample in GitHub.