We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

auto complete remote data

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.



11 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team October 8, 2019 07:42 AM UTC

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
 
 
 
Kindly let us know the above suggestion is not meet your requirement.

 
Regards, 
Narayanasamy P. 



JL jose lara October 9, 2019 01:54 AM UTC

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.


NP Narayanasamy Panneer Selvam Syncfusion Team October 9, 2019 12:09 PM UTC

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. 
 
 
 
<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. 



JL jose lara October 10, 2019 02:06 AM UTC

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


NP Narayanasamy Panneer Selvam Syncfusion Team October 10, 2019 04:49 PM UTC

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); 
} 
 
 
 
Regards, 
Narayanasamy P. 



JL jose lara October 11, 2019 02:43 AM UTC

Excellent! thanks again :) 


NP Narayanasamy Panneer Selvam Syncfusion Team October 11, 2019 06:50 AM UTC

  
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.
 



MB Marko Bezjak October 22, 2019 08:40 AM UTC

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


SP Sureshkumar P Syncfusion Team October 23, 2019 11:58 AM UTC

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 



MB Marko Bezjak October 30, 2019 08:37 AM UTC

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


BC Berly Christopher Syncfusion Team October 31, 2019 06:00 PM UTC

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
 


Loader.
Live Chat Icon For mobile
Up arrow icon