Kendo UI: Autocomplete Custom filtering event

Question

I am trying to create a people finder control using Kendo UI Autocomplete component.

This autocomplete components gets the datasource from an 3rd party product which has very poorly designed APIs to get users. There is no GET Endpoint which will return all the users but the API only has a search endpoint, where I can provide a keyword and it will return all the users who matches that keyword. So if I need to get all users from the user store , I would need to send 26 (one for each alphabet) post requests and merge the results to one collection and pass it to the Kendo Autocomplete data-source. This is making the page very slow. so I have tried below approach:

Initialize the Kendo autocomplete control with no data.
Build custom filtering event handler, which will take the value entered and pass it to the POST endpoint as a keyword for search and once the list of users is obtained, bind the datasource of the control.

 $("#pplFinderCtrl").kendoAutoComplete({
                dataSource:{
                    serverFiltering:true
                },
                dataTextField:"Name",
                filter: "contains",
                placeholder: "Officer",
                filtering:async function(e){
                    var value:string = <string>$("#pplFinderCtrl").val();
                     console.log(value);
                     const users:User[]=await ProfileService.searchUser(value.toString());
                     let ddl: any=  $("#pplFinderCtrl").data("kendoAutoComplete");
                     ddl.setDataSource(users);
                     console.log(users);
                }
            });

This works well if the user types slowly, but when the user types fast and after binding the autocomplete panel does not show the results based on new data binded to it. The results for the last key pressed will appear in the panel only after pressing the next key.

I have seen the Kendo server filtering option, but I want to do some cleaning of the data after receiving from the API before passing on to the kendo control.

Kevin Kevin · Accepted Answer · 2019-07-01T16:41:07

From what I understand of your question, I think that you should do an initial pull from the API and just throw it into your own database and then create your own methods for finding users. When I use the kendoAutoComplete it is not that responsive when I type fast so it may just be a limitation with the component, and not because your of get requests.

Kendo UI: Autocomplete Custom filtering event

1 Answers