How do you query an API as the user types

Question

HiIs it possible to use the Blazor AutoComplete component to query an API every time the user enters a letter?For example the following API will return a list of (up to 10) stocks that contain the letters "coi" in their names:GET:  https://api.nasdaq.com/api/autocomplete/slookup/10?search=coi Ideally i would want the API queried after every letter that the user enters in order to narrow down the selection.You can see an autocomplete textbox here that behaves in that way: https://www.nasdaq.com/market-activity/stocks/screener Any idea how to achieve this using the autocomplete component?

Ponmani Murugaiyan · Accepted Answer

Hi James, 

The AutoComplete supports retrieval of data from remote data services with the help of DataManager component. By default, in AutoComplete component filtering property is enabled, so if you type any character the request will send to server and fetch the matched item and the results will be shown in the popup. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_API-1155773047 

For more information, please refer the below demo and documentation. 

https://blazor.syncfusion.com/demos/autocomplete/data-binding?theme=bootstrap5 
https://blazor.syncfusion.com/documentation/autocomplete/data-source#bind-to-remote-data 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html?&#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query 

The filter queries can be customized using the custom filtering option on each time the character typed, filtering event will be triggered. 
https://blazor.syncfusion.com/documentation/autocomplete/filtering#custom-filtering 





private async Task OnFilter(FilteringEventArgs args) 
{ 
    args.PreventDefaultAction = true; 
    var query = new Query().Where(new WhereFilter() { Field = "Name", Operator = "contains", value = args.Text, IgnoreCase = true }); 
    query = !string.IsNullOrEmpty(args.Text) ? query : new Query(); 
    await autoObj.FilterAsync(Country, query); 
} 


Regards, 
Ponmani M

James · Answer

Thanks for your assistance Ponmani.James

Ponmani Murugaiyan · Answer

Hi James 

Welcome, if you need further assistance, please revert us we will assist you. 

Regards, 
Ponmani M