The AutoComplete has built-in support to highlight the searched characters on suggested list items when enabled the highlight property.
In the below sample, to customize the matched character in suggestion list by e-highlight
class.
@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;
namespace WebApplication1.Models
{
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
public List<Countries> CountriesList()
{
List<Countries> country = new List<Countries>();
country.Add(new Countries { Name = "Australia", Code = "AU" });
country.Add(new Countries { Name = "Bermuda", Code = "BM" });
country.Add(new Countries { Name = "Canada", Code = "CA" });
country.Add(new Countries { Name = "Cameroon", Code = "CM" });
country.Add(new Countries { Name = "Denmark", Code = "DK" });
country.Add(new Countries { Name = "France", Code = "FR" });
country.Add(new Countries { Name = "Finland", Code = "FI" });
country.Add(new Countries { Name = "Germany", Code = "DE" });
country.Add(new Countries { Name = "Greenland", Code = "GL" });
country.Add(new Countries { Name = "Hong Kong", Code = "HK" });
country.Add(new Countries { Name = "India", Code = "IN" });
country.Add(new Countries { Name = "Italy", Code = "IT" });
country.Add(new Countries { Name = "Japan", Code = "JP" });
country.Add(new Countries { Name = "Mexico", Code = "MX" });
country.Add(new Countries { Name = "Norway", Code = "NO" });
country.Add(new Countries { Name = "Poland", Code = "PL" });
country.Add(new Countries { Name = "Switzerland", Code = "CH" });
country.Add(new Countries { Name = "United Kingdom", Code = "GB" });
country.Add(new Countries { Name = "United States", Code = "US" });
return country;
}
}
}
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();
}
}
}