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

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

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();
        }
    }
}

NOTE

View Sample in GitHub.