AutoComplete struggles when using large set of data; Need to be able to search two fields

[Paul Kocher]

Hi!

I need to use an ICD10-Autocomplete in my app. The dataset has about 15k records which I load into an NGRX store on app launch. I wanted to set the minLength to 3 since users will most likely enter something as "A00" or "Cho" but the AutoComplete component doesn't respect that. It instantly starts searching which keeps it from working smooth. It takes about 5 seconds before the suggestion list opens.

I realize there isn't a virtual scroll option - however I found an old forum post (using the EJ1 components) where a Syncfusion employee suggested some code in the action complete event. I checked the example and realized it wouldn't find the correct entry unless it had been shown in the list before so this isn't really an option.

What would be the best way to work with such an amount of records?

Also I need to be able to search on both fields of the dataset. There are icdCode and diagnosis fields which are both relevant.

Using ng-template I was able to display records like this "A00 - Cholera". A00 is icdCode, Cholera is diagnosis.

I tried chaining the .where functions:

onFilteringIcd10: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {

let query: Query = new Query();

query =

e.text !== '' ? query.where('diagnosis', 'contains', e.text, true).where('icdCode', 'contains', e.text, true) : query;

e.updateData(this.icd10, query);

};

How can I get this fixed?

Thanks 

Paul

[Prince Oliver]

Hi Paul, 

Thank you for using Syncfusion products. 

To work with large amount of data, we suggest you to use Virtual Scrolling technique which loads items on demand. We can achieve this by loading items manually upon 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. 

public onFiltering (e) 

{ 

    let start: number = 11; 

    let end: number = 20; 

    let listElement: HTMLElement =  (this.atcInstance as any).list; 

    let obj: any = this.atcInstance; 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      

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

        if (listElement.scrollTop + listElement.offsetHeight >= parseInt(obj.popupHeight)) { 

            let filterQuery = this.query.clone(); 

            this.data.executeQuery(filterQuery.range(start, end)).then((event: any) => { 

                start = end; 

                end += 5; 

                for(var i=0;i<event.result.length;i++) 

                { 

                obj.addItem(event.result[i]); 

                var lastItem = obj.liCollections[obj.liCollections.length-1]; 

                lastItem.textContent = ""; 

                var itemTemplate1= "<span><span class='name'>"+ event.result[i].CustomerID + "</span>-<span class ='city'>"+ event.result[i].Country +"</span></span>"; 

                lastItem.appendChild(document.createRange().createContextualFragment(itemTemplate1)); 

                }   

            }).catch((e: Object) => { 

            }); 

        } 

    }) 

} 

We can use the Predicate in DataManager to combine multiple queries to search based on both fields. Kindly refer to the following code snippet. 

public onFiltering (e) 

{ 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 

    //Use predicate to combine multiples queries 

    var predicate = new Predicate('CustomerID', 'contains', e.text);        

    predicate = predicate.or('Country', 'contains', e.text);  

    var query = new Query(); 

    query = (e.text != "") ? query.where(predicate).take(10) : query; 

    //pass the filter data source, filter query to updateData method. 

    e.updateData(this.data, query); 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  

} 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-t6vbvr  

Please let us know if you require any further assistance on this. 

Regards, 

Prince 

[Paul Kocher]

Hi Prince Oliver,

everything works now - even without using the virtual scrolling you suggested. After using Predicate the delay is gone. Must be some problem with Query.

Anyway thanks again!

[Prince Oliver]

  

Hi Paul, 

Most welcome. We are glad that the issue is resolved in your end. 

Regards, 

Prince