How to rebind datasource as user types?

Question

I want to dynamically change the datasource to fetch data based on what the user has typed. How can I do this? I tried to do it in the filtering event, but it's not showing the updated datasource items in the drop down.

Please see video of example that I want to copy. https://drive.google.com/file/d/1pm-bR26zkLhWuuK83wg5BiXp5RhexW7w/view?usp=sharing

interface ContactApiResponse {
    email: string;
    fullName: string;
    matchOn: string;
}

private sportsData: string[] = [];    
public multiSelect: any;

onSearch(arg: FilteringEventArgs | undefined) {
        this.sportsData.length = 0;
        
        axios.get('https://localhost:44346/portal/contact/search', {
            params: {
                includeShadow: true,
                search: arg?.text
            }
        })
            .then((response) => {
                let data: ContactApiResponse[] = response.data;
                if (data) {
                    let emails = data.map((m) => m.email);
                    for (let i = 0; i < emails.length; i++)
                        this.sportsData.push(emails[i]);
                }
            })
            .then((error) => {
                console.log(error);
            });
    }

<MultiSelectComponent ref={multiSelect => { this.multiSelect = multiSelect }} dataSource={this.sportsData}
                        value={this.values}
                        mode={'Box'}
                        allowCustomValue={true}
                       
                        allowFiltering={true}
                        filtering={this.onSearch.bind(this)}
                        
                        className="form-control"
                       >MultiSelectComponent>

Ponmani Murugaiyan · Accepted Answer

Hi Nick, 

Thanks for contacting Syncfusion support. 

Based on your shared code snippet, you have pushed the items into the datasource variable in the filtering event. We would like to know you that to reflect the pushed values in the datasource, we suggest you to push the value into a dummy variable (this.tempData) and then assign that variable to the component value property (this.sportsData) as shown in the code snippet below.   





this.tempData.push(emails[i]); 
this.sportsData = this.tempData; 

Sample: https://stackblitz.com/edit/react-2xqeyc 

Please get back us if you need further assistance. 

Regards, 
Ponmani M

Nick Lechnowskyj · Answer

Thank you, this works.

Sevvandhi Nagulan · Answer

Hi Nick, 



We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 



Regards, 
Sevvandhi N

Nick Lechnowskyj · Answer

Hi,Each time user types a character an HTTP request is created to fetch the data. However, this quickly results in at least a dozen http requests that are now no longer needed since the user has filtered the query further. How can I cancel previous XHR's on every key press to increase performance?

Sevvandhi Nagulan · Answer

Hi Nick, 


We checked your query. We cannot cancel the request that we sent to server. However, we can delay the request when typing the characters rapidly to avoid multiple requests using the debounce concept. Please refer the following sample. 

Sample link: https://stackblitz.com/edit/react-2xqeyc-nfimpd 


Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N