Custom highlight search

19 Feb 20241 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 below sample customizes the matched character in suggestion list by e-highlight class.

CSHTML

@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>

NOTE

View Sample in GitHub.