Dynamically Updating as the user types

[Zachary]

I have a very large dataset and would like to have the autocomplete update as the user types, but I'm having trouble finding an example of how I could do that. All the examples seem to preload the data on startup.

Is their a way to retrieve partial datasets as the user is typing to show in the popup below without fetching the entire dataset?

[Berly Christopher]

Hi Zachary, 

  

Greetings from Syncfusion support. 

  

We have validated your reported issue. As per your requirement for loading large data we suggest you to use the virtual scrolling to get rid of the reported issue. When scrolling, the request is sent and fetch some amount of data from the server dynamically. Using the scroll event, get the data and generate the list add to popup using the addItem method.  

  

[app.component.ts]  

 

public actionComplete(args){  

    let start: number = 7;  

let end: number = 12;  

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

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

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

  let filterQuery = this.dropdownObj.query.clone();  

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

    start = end;  

    end += 5;  

    this.dropdownObj.addItem(event.result as { [key: string]: Object }[]);  

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

  });  

}  

})  

}  

  

  

Sample Link: https://stackblitz.com/edit/angular-lm3yxp-ngwe8f?file=app.component.html   

  

Kindly check with the above sample. Please get back us if you need further assistance.  

  

Regards,  

Berly B.C 

[Zachary]

Thanks Berly,

The one issue I have here is that it does not quite suite the use case. The user will typically not scroll when using an autocomplete, they will be typing and the list will be dynamically changing.

So what I really need is something like this:

1) User types (a)

Dropdown displays:

abacterial

abactinal

abaculus

abaculus

2) user types d (so ad is now in the textbox)

Dropdown displays

additive

addin

address

adductor

So the dropdown is changing as the user types.

is this type of scenario supprted?

[Ponmani Murugaiyan]

Hi Zachary, 

Thanks for the update. 

We checked your reported query and would like to inform you that by default, the AutoComplete component loads 10 data based on the take property, such as take(10). After filtering, the remaining data will be updated as per your requirements. 

As a result, the AutoComplete component will function according to your requirements. Please check the above suggestion, and if we misunderstood the query or the issue still exists, please revert with more details, such as a video demonstration and issue replicating sample, so that we can check and give you with a solution as soon as possible. 

Regards, 

Ponmani M 

[Zachary]

Thanks for your help on this Ponmani, in the end i was able to accomplish what I was trying to do with the filtering and databound events of the grid.

  this.payeeAutoComplete.dataBound = this.onPayeeAutocompleteDataBound.bind(this);

                this.payeeAutoComplete.filtering = this.onPayeeFiltering.bind(this);

----

 public onPayerDropDownReturn(data: any) {

        this.payeeAutoCompleteData = data;

        this.payeeAutoComplete.dataSource = data;

    }

    public onPayeeAutocompleteDataBound(e: Object) {

        setTimeout(() => this.payeeAutoComplete.showPopup(), 400)

    }

    public onPayeeFiltering(e: FilteringEventArgs) {

        // if(e.text.length >= this.minLength){

        let params = new HttpParams();

        params = params.append('searchText', e.text);

        e.preventDefaultAction = true;

        this.httpClient.get<Object>(environment.getPayeeDropdownDataUrl, { params: params })

            .subscribe(this.onPayerDropDownReturn.bind(this));

    }

[Deepak Ramakrishnan]

Hi Zachary, 

 

We are glad to know that the issue is resolved at your end. Please let us know if you need further assistance on this. 

  

Regards,  

Deepak R