Autocomplete - Loading performance

[RJ Ramarao]

Hi,

I am using autocomplete control using the viewbag object as a data source. I have close to 5K records and the user should choose the value for the filtering the data. Right now the performance is very slow. Was thinking to limit the loading count to 500 and update the data source on a key down event. Please suggest with sample code.

[Narayanasamy Panneer Selvam]

Hi Ramarao, 

 

Greetings from Syncfusion support. 

 

We have checked your query. Please find the analyzed details, While working with huge amount of data, we suggest you to use Virtual Scrolling technique which loads items on demand. We can achieve this by loading items manually on scrolling. We can use the filtering event in the AutoComplete control and bind the scroll event for the popup list event. Kindly refer to the following code snippet. 

 

Code example: 

var isInitial= false;  

    function onFilter(e) {  

        if (!this.isInitial) {  

            var start = 11;  

            var end = 20;  

            var instance = document.getElementById("games").ej2_instances[0]; 

            var listElement = instance.list; 

            var query = new ej.data.Query(); 

            query = (e.text !== '') ? query.where('CustomerID', 'startswith', e.text, true) : query; 

            listElement.addEventListener('scroll', () => {  

                if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) { 

                    var filterQuery = query.clone();  

                    debugger 

                    new ej.data.DataManager(this.dataSource).executeQuery(filterQuery.range(start, end)).then((event) => {  

                        start = end;  

                        end += 5;  

                        instance.addItem(event.result);  

                    }).catch((e) => {  

                    });  

                }  

            })  

        }  

    } 

 

We have attached a sample for your reference, please get it from here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11092650932 

 

Regards, 

Narayanasamy P.