Search results

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

25 Oct 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.

tagHelper
highlight.cs
Copied to clipboard
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" query="new ej.data.Query().from('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="https://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager>
        </ejs-dropdownlist>

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