Optimize the filtering time in the drop-down component?

[MM]

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.ts

If you type something very fast on the search filed you will notice some delays.

Thank you,

M

[Ponmani Murugaiyan]

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]

Good day

May I please request a full example of how to do this with a dropdown in EJ2 Javascript?

Kind regards

Daniel

[UdhayaKumar Duraisamy]

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]

Good day 

Noted, thank you very much, I will try this out.

Kind regards

Daniel

[Shereen Shajahan]

Hi Daniel

Please get back to us for assistance in the future.

Regards,

Shereen