Search results

Highlight the matched character in filtering in JavaScript (ES5) DropDownList control

08 May 2023 / 2 minutes 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
//bind the data manager instance to dataSource property
var data=new{
            url: '',
            adaptor: new,
            crossDomain: true
    //initiates the component
var customers = new ej.dropdowns.DropDownList({
    //bind the data manager instance to dataSource property
    dataSource : data,
    //bind the Query instance to query property
    query: new['ContactName']).take(6),
    //map the appropriate columns to fields property
    fields: { value: 'ContactName'},
    //set the placeholder to DropDownList input
   placeholder: "Select a name", 
    // set true to allowFiltering for enable filtering supports
     allowFiltering: true,
    //bind the filtering event handler
    filtering: (e) => {
        // take text for highlight the character in list items.
        let text = e.text;
        let query = new['ContactName', 'CustomerID']);
        //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, query);
        setTimeout(() => {
            let popupElement = document.getElementById('ddlelement_popup');
            // get the list from popup element
            let lists = popupElement.querySelector('ul');
            // pass the element, text, ignore case and filter type as argument to highlightSearch method.
            ej.dropdowns.highlightSearch(lists, text, true, 'StartsWith');
        }, 300);

//render the component
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link href="//" rel="stylesheet">
<script src="" type="text/javascript"></script>

    <div id="container" style="margin:0 auto; width:250px;">
        <input type="text" id="ddlelement">

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>