Highlight the matched character in filtering
12 Apr 20223 minutes to read
By using the highlightSearch method, you can highlight the matched character in DropDownList filtering.
@Html.EJS().DropDownList("customers").Placeholder("Select a customer").Filtering("filtering").PopupHeight("200px").DataSource(dataManger =>
dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).AllowFiltering(true).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings
{
Value = "CustomerID", Text = "ContactName"
}).Query("new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)").Render()
<script>
var queryString;
document.addEventListener('DOMContentLoaded', function () {
var ddlObj = document.getElementById("customers")
ddlObj.ej2_instances[0].fields = {
text: "ContactName", value: "CustomerID", itemCreated: function (e) {
new ej.dropdowns.highlightSearch(e.item, queryString, true, 'StartsWith');
}
}
}, false);
function filtering(e) {
var data = document.getElementById('customers').ej2_instances[0];
// take text for highlight the character in list items.
queryString = e.text;
var query = new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
//frame the query based on search string with filter type.
query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
//pass the filter data source, filter query to updateData method.
e.updateData(data.dataSource, query);
}
</script>
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 DropDownListController : Controller
{
public IActionResult highlight()
{
return View();
}
}
}