Search results

Highlight the matched character in filtering in ASP.NET MVC DropDownList control

29 Nov 2021 / 1 minute to read

By using the highlightSearch method, you can highlight the matched character in DropDownList filtering.

The following example demonstrates about how to highlight the matched character in filtering.

Copied to clipboard
@Html.EJS().DropDownList("customers").Placeholder("Select a customer").Filtering("filtering").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url("").Adaptor("ODataV4Adaptor").CrossDomain(true)).AllowFiltering(true).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings
                Value = "CustomerID", Text = "ContactName"
            }).Query("new'Customers').select(['ContactName', 'CustomerID']).take(6)").Render()
    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'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);
Copied to clipboard
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();