Custom Highlight Search in ASP.NET MVC 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.

@Html.EJS().AutoComplete("games").Highlight(true).Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.AutoCompleteFieldSettings { Value = "Name" }).Render()
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();
        }
    }
}

View Sample in GitHub.