Autocomplete with Key based search API

[Shreekumar]

I'm using AutoComplete with Dynamic Data as defined in this URL : https://ej2.syncfusion.com/angular/documentation/auto-complete/data-binding/#bind-to-remote-data

My API looks like getCountries/{key} - Here key used to filter the Data.

For example: If I call getCountries/Ind - It'll list all the Countries starting with Ind

I want to call this API with Parameter on Auto Complete. How to achieve this? The moment I type Ind in AutoComplete textbox, I want to hit this API and pass typed characters as parameter to API and get the Auto Complete suggestions as response.

[Sevvandhi Nagulan]

Hi Shreekumar, 

Greetings from Syncfusion support. 

You will get the text entered in the filtering event and using the addParams method to send the text to server. In server side you can filter the text and return the value. Refer to Code below, 

Client side:  

    public onFiltering(e) 

        { 

            var dropdown_query = new Query(); 

            dropdown_query = (e.text !== '') ? dropdown_query.where('Name', 'startswith', e.text, true).addParams('text', e.text) : dropdown_query; 

            e.updateData(this.data, dropdown_query); 

        } 

Server side:  

 

   public List<Countries> Get(string text) 

        { 

 

            List<Countries> filter = new List<Countries>(); 

            var Data = GetData(); 

            filter = Data.Where(j => j.Name.ToLower().StartsWith(text.ToLower())).ToList(); 

            return filter; 

        } 

 

 

 

Client side sample: https://stackblitz.com/edit/angular-pvrfs5-yl6cn6?file=app.component.ts 

Server side sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_backend-1656300937_(3)568489158 

Regards, 

Sevvandhi N