auto complete remote data

[jose lara]

Hi, I am following the below example to load remote data.In this example, the filteration happens after loading the complete data list from the backend. However, I could have thousands of records from which the user is looking for only one. How can I submit just the search query or search term to the backend and just get a few relevant options from the backend, instead of loading all the records and then applying the filter in the front end? I am trying to build an efficient solution.

https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/data-binding

[Narayanasamy Panneer Selvam]

Hi Jose,

 

Greetings from Syncfusion support. 

 

We have validated your requirement. You can get only required amount of data from server response, by using suggestionCount property.
For your convenience we have prepared a demo sample, please get it from the below link,
Demo sample: https://stackblitz.com/edit/angular-psyvs9  

 

API Reference: https://ej2.syncfusion.com/angular/documentation/api/auto-complete/?no-cache=1#suggestioncount 

 

Kindly let us know the above suggestion is not meet your requirement.

 

Regards, 

Narayanasamy P. 

[jose lara]

Even if I use suggestionCount, I will still be loading all the records from the backend. What if I have 10000+ records? I don't want load all of them from the server and then filter in the UI tier.  Or, is there a way I can get the characters I typed in the autocomplete on change event?  This way, when user types minimum 3 characters, I can get that value and pass it on to server, to get only those records that match these 3 characters.

[Narayanasamy Panneer Selvam]

Hi Jose, 

 

Thanks for your update. 

 

We have a property called ‘minLength’. It fetches the data from the server after the minimum character count limit is reached. 

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/auto-complete#minlength 

 

Demo sample (minLenght): https://stackblitz.com/edit/angular-qcxtym-xtdpc4  

 

<ejs-autocomplete id='products' #remote [dataSource]='data' filterType='StartsWith' [fields]='remoteFields' 

[autofill]='true' [query]='query' [minLength]="minLength" [placeholder]='remoteWaterMark' sortOrder='Ascending'></ejs-autocomplete> 

 

For your convenience we have prepared a sample. Please find it in the below link, 

 

Demo sample (to get typed text at server end): https://stackblitz.com/edit/angular-efhik2-2hk8o1 

 

In the above sample you can pass entered character in the autoComplete component through filtering event. 

Regards, 

Narayanasamy P. 

[jose lara]

thx. This works as expected. How can I get the ID of the selected item after a match is found? 

[Narayanasamy Panneer Selvam]

Hi Jose,  

 

You are welcomed. 

 

Yes, we can achieve mentioned requirement through select event of autocomplete. In the select item event argument you can get itemData as object, from the obtained object you can get details of all data, which is returned from service. In the below screenshot we can get required object values returned from server. 

 

 

Code example: 

html 

<ejs-autocomplete  id='customers2' ... (select)="onSelect($event)"></ejs-autocomplete> 

 

 

TS 

public onSelect(args: SelectEventArgs): void { 

  console.log(args.itemData); 

} 

 

API Reference: https://ej2.syncfusion.com/angular/documentation/api/auto-complete#select 

 

Demo sample: https://stackblitz.com/edit/angular-efhik2-38vfqr  

 

Regards, 

Narayanasamy P. 

[jose lara]

Excellent! thanks again :) 

[Narayanasamy Panneer Selvam]

  

Hi Jose,

Thanks again for the update.

We glad to hear that your issue has been resolved. Kindly let us know if need further assistance on this.

Regards,
Narayanasamy P. 

[Marko Bezjak]

Hello.

I was looking at the example (https://stackblitz.com/edit/angular-efhik2-2hk8o1) where you send the search string on the server and everything works fine... BUT is there a way so that the popup would not close and then again open when new data gets loaded in?

And in my opinion this really is not a good practice...

Thanks in advance.

Marko

[Sureshkumar P]

Hi Jose, 

 

We have checked the reported requirement. We have changed the sample as per the requirement. Here we have used the setTimeout for loading the data from the server. 

 

Also, we have sent the search along with the request using httpParams. Please refer the screenshot, 

 

 

 

We created a sample based on your requirement and update here. Please find the sample here: https://stackblitz.com/edit/angular-efhik2-xxkfbh?file=app.component.ts  

 

 

Regards, 

Sureshkumar P 

[Marko Bezjak]

Hello.

Sorry this is not what I was looking for. The dropdown with items still CLOSES when new data gets from server.. I want it to stay open for the whole time. And Is there any other way for this to work without using "setTimeout" function? (what if server gets slow and it takes 1000ms to get the data? then this timeout function is useless??).

Please send my a better example if you can.

Best regards. Marko

[Berly Christopher]

Hi Jose, 

 

We would like to inform you that, we have achieved your requirement “popup will not get closed on filtering.” by using setTimeOut method since the popup list element needs some time to generate based on the typed value and it’s not related to the data fetch from the server. So, we need to call the setTimeOut method mandatory for your scenario. 

 

Regards,
Berly B.C