Optimize the filtering time in the drop-down component?

Question

Hello,What is the best way to optimize the filtering time in the drop-down component?Example:https://stackblitz.com/edit/angular-qnm3yr-saehax?file=app.component.tsIf you type something very fast on the search filed you will notice some delays.Thank you,M

Ponmani Murugaiyan · Accepted Answer

Hi Maja, 
 
Greetings from Syncfusion support. 
 
You can optimize the filtering time when you type very fast. As per your requirement we have prepared sample using debounce method which delay the request to wait for the input at a particular interval and make the request. This will avoid multiple request for each input. Please find the code snippet and sample for reference. 
 
[app.component.ts] 
 




public onFiltering=(e)=>{ 
    e.preventDefaultAction=true; 
    this.setDebounce(e); 
   } 
     public setDebounce=debounce((e)=>{ 
     this.onFilter(e); 
   },500); 
    onFilter(e){ 
   let query = new Query(); 
   let predicateQuery = query.where( 
     new Predicate("FirstName", "contains", e.text, true).or( 
       "LastName", 
       "contains", 
       e.text, 
       true 
     ) 
   ); 
   query = e.text !== "" ? predicateQuery : query; 
   e.updateData(this.data, query); 
}; 
 
 
Sample: https://stackblitz.com/edit/angular-qnm3yr-lzykhi?file=app.component.ts 
 
Kindly check with the above sample. Please get back us if you need further assistance. 
 
Regards,  
Ponmani M

Daniel Seleka · Answer

Good dayMay I please request a full example of how to do this with a dropdown in EJ2 Javascript?Kind regardsDaniel

UdhayaKumar Duraisamy · Answer

To implement debounce functionality with filtering in the EJ2 JavaScript Dropdown List, you can delay the filtering operation until the user stops typing for a specified period. This reduces unnecessary API calls and enhances performance.

Below is an example demonstrating how to incorporate debounce functionality with filtering in the EJ2 Dropdown List:

var searchData = new ej.data.DataManager({

  url: 'https://services.odata.org/v4/northwind/northwind.svc/',

  adaptor: new ej.data.ODataV4Adaptor(),

  crossDomain: true,

});

var dropDownListObj = new ej.dropdowns.DropDownList({

  dataSource: searchData,

  query: new ej.data.Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6),

  fields: { text: 'FirstName', value: 'EmployeeID' },

  placeholder: 'Select customers',

  sortOrder: 'Ascending',

  allowFiltering: true,

  filtering: debounce((e) => {

    e.preventDefaultAction = true;

    if (e.text === '') {

      e.updateData(searchData);

    } else {

      var query = new ej.data.Query().from('Employees').select(['FirstName', 'EmployeeID']);

      query = e.text !== '' ? query.where('FirstName', 'startswith', e.text, true) : query;

      e.updateData(searchData, query);

}

  }, 1000), // 1000ms debounce delay

});

dropDownListObj.appendTo('#country');

function debounce(callback, delay = 1000) {

  let timeout;

  return (...args) => {

    clearTimeout(timeout);

    timeout = setTimeout(() => {

      callback(...args);

    }, delay);

};

}

In this setup, the debounce function is used to delay the execution of the filtering logic by 1000 milliseconds (1 second). This means that the filtering operation will only be triggered if the user stops typing for 1 second, thus reducing the number of API calls made during rapid typing.

For a live demonstration of this implementation, you can refer to the following sample: T6egs1ck (forked) - StackBlitz

Daniel Seleka · Answer

Good day Noted, thank you very much, I will try this out.Kind regardsDaniel

Shereen Shajahan · Answer

Hi DanielPlease get back to us for assistance in the future.Regards,Shereen