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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

auto complete remote data

Thread ID:

Created:

Updated:

Platform:

Replies:

148115 Oct 7,2019 02:09 AM UTC Oct 31,2019 06:00 PM UTC Angular - EJ 2 11
loading
Tags: AutoComplete
jose lara
Asked On October 7, 2019 02:09 AM UTC

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.



Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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. 


jose lara
Replied On 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.

Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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. 


jose lara
Replied On 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? 

Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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. 


jose lara
Replied On October 11, 2019 02:43 AM UTC

Excellent! thanks again :) 

Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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.
 


Marko Bezjak
Replied On 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

Sureshkumar P [Syncfusion]
Replied On 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 


Marko Bezjak
Replied On 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

Berly Christopher [Syncfusion]
Replied On 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
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon