Search results

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

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.

<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" query="new'Customers').select(['ContactName', 'CustomerID']).take(6)" allowFiltering="true" filtering="filtering" placeholder="Select a customer" popupHeight="200px">
            <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>
            <e-data-manager url="" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager>

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