Creating an efficient AutoComplete Control for ASP.NET Core using Kendo UI

Implementing an AutoComplete Control on ASP.NET Core using Telerik

Have you ever thought of having an “autocomplete” solution that would allow users to type any value in for their username search, and not have the web app returns so much data that it slows down the app.

So, the way out I had formerly worked with was Telerik autocomplete for ASP.NET Core. It was fairly simple to get client or server filtering running, but the huge con with that is that all items from the search results will be returned, potentially resulting in a enormous amount of data sent at once, which is very bad.

You can directly code the paging mechanism into your controller, which will only return a  page at a time, but there is a stress-free way! What can that be? Using virtualization option, but if we are to go by the demo on Telerik’s website, there are numerous other functions aside from the main controller action to return all the data from a specific search. The demo code shows many functions that are not yet written that you would probably have to write:


The value mapper controller action is not present from the demo, and it is not clear what you need to write. This also may not function on ASP.NET core, as there is no clear way to forward the Request Verification Token back to the controller, (if you use a POST request.) But, going by the documentation for virtualization, the implementation of the valueMapper function is not compulsory, and is only necessary when the autocomplete widget contains an initial value or if the value method is utilized. So, now we can simply create our HypertextT Markup Language (HTML) markup as follows:


The controller code is typically  not different from the ASP.NET Core demo code, so, no extra changes have to be made to give room for virtualization, as that will be taken care of  by Telerik ajax code. It will ideally pass the correct parameters into your controller code, to only recover what ever page of data (or less) that it needs at any given time:


So you now  have the complete markup and controller code, and can start testing the behaviour and performance of the autocomplete capability. It is fascinating to compare it with just the Server Filtering option enabled, where when the autocomplete controller action is called, the whole dataset is returned (except for of course as I mentioned before, you want to carryout custom paging on the server side). So, with a potentially immense user database, this would not be a pragmatic solution.

This is the exact markup, but with only server filtering allowed, no virtualization. As you can observe on each call, the entire dataset is returned:


Now, lets note the huge difference with virtualization enabled for autocomplete:


The first little requests are the controller which return a specific page (or even not up to a page), per request. So, you can see a notable  decrease in the amount of data returned, and  will add the autocomplete responsiveness, and in exchange the user experience.

Indubitably, the latest untangled virtualization feature on Telerik’s Autocomplete function is fairly facile to carryout (if you have the forbearance to take their incomplete demo code, and also study most of the documentation) You surely need to have a good knowledge on how to actually carryout  the functionality, so you can fine-tune it if needed. This is also a perfect solution for applications with enormous datasets that need to be searched on request, and yet give a responsive user interface.

SEE SOURCE CODE HERE

Leave a Reply

Your email address will not be published. Required fields are marked *