How to limit the search to be fired only when atleast 3 characters have been typed?

Question

Team,I am using syncfusion multiselect dropdown with remote data binding.For filtering case, I want filtering to occur (i.e getting data from API) only when atleast 3 characters have been typed.I have demo for this scenario for Syncfusion DropdownList but not for multiselect. Applying same technique do not work.Could you please provide a demo with multi select used along with remote data bind WebApiAdaptor with filtering only when atleast 3 characters have been types?ThanksTuariq

Ponmani Murugaiyan · Accepted Answer

Hi Tuariq, 

Thanks for contacting Syncfusion support. 

The requested requirement has been already included in the Multiselect documentation. Please find the sample and documentation link below for reference. 





public onFiltering: EmitType =  (e: FilteringEventArgs) => { 
    // load overall data when search key empty. 
    if(e.text == '') e.updateData(this.searchData); 
    else{ 
        // restrict the remote request until search key contains 3 characters. 
        if (e.text.length < 3) { return; } 
        let query: Query = new Query().select(['ContactName', 'CustomerID']); 
        query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query; 
        e.updateData(this.searchData, query); 
    } 
}; 


Sample: https://stackblitz.com/edit/angular-33ydv1-bvm3xs?file=app.component.ts  

Documentation: https://ej2.syncfusion.com/angular/documentation/multi-select/filtering/#limit-the-minimum-filter-character  

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 
Ponmani M