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