Custom highlight search

10 Mar 20221 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

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

Highlight.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult highlight()
        {
            ViewBag.data = new Countries().CountriesList();
            return View();
        }
    }
}