Problem with the Autocomplete Component

I am running into multiple issues with the sample of your AutoComplete control.

a) I made some changes to my back end to accommodate same query as you used in sample just a bit more flexible so it can be reused . After doing so i am seeing a problem when the user enters a value which does not return any data like www. The spinner comes on and after some time shows no Data was found as expected. if i click the X while the No Data Found is still showing the spinner goes in an infinite loop. If i wait or click till the No data found message is gone, I can click the X and it clears the box without spinner. The option is to return nothing or to reyrn all data unfiltered and if i return nothing i get the No records found over and over or the whole list ? What does the control expect ?

b) What do i need to do to load the additional matches if there is more then the set 20? it always will only load the 20 and not send a request to load additional records ?

Here is a StackBlitz witch shows the issues Stack Blitz Sample

Hello Alex, 

Regarding your first question, I would like to suggest that you try reproducing the issue using different remote data, for example the one that is used in the autocomplete sample. If this doesn’t work, you could also try to reproduce it in a separate sample and send it back to me for further investigation. Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

After looking further into your second question, I determined that the DropDown shows every item it contains, even if there are over twenty items, because there is a loop:

          
              
        {{ item.field }}                   
                    

Thank you for your cooperation. Looking forward to hearing from you.

Regards,
Monika Kirkova,
Infragistics

I have to say i am quite disappointed by this response…. This has to be an all time low as far as quality of support.

a) the issue on the delete of a non found value like www does not only happen with my remote data but even on the sample on the your side which could have been easily verified. The issue is not the remote data but the question is what causes the system to fire off a blank query when a non found value is removed vs there is no query when a valid value is removed.

b) if you like to use code samples please bother to read the whole code before you copy and paste.

 this.remoteService.getData({ startIndex: 0, chunkSize: 20 }, inputTerm, (args) => {
            this.loading = false;
            this.noItems = args.value.length === 0;
        });

The above code in the component asks for a chunk of 20 so that's all your HTML code via *ngFor can loop thru, So this answer was completely wrong.

If you cant answer the above issues because of lack of knowledge please refer this to someone who has the expertise

Hello, Alex,

I believe you are using the following demo, presented in our samples browser. Please, correct me if I’m wrong.

The demo above is demonstrating only remote filtering, and does not implement loading data on demand, which I assume, you are expecting when having more than 20 records filtered. Can you please verify that you are looking for a way to initially load 20 matching results and afterwards, when scrolling, load the rest of the results on demand? This can be achieved by using virtual `igx-drop-down`. Here is a sample demonstrating it. What needs to be done is to use autocomplete with virtual drop down. In that case we will have both filtering and loading data remotely. I’ve already started implementing this and will send the solution when I’m ready. Please confirm that this is what you are also expecting and if such a sample will be useful for you.

When looking at the service that is implemented in the following demo (specifically the ‘buildUrl’ method), no matter what the input value is, when the clear button is pressed, then the value will be empty string and no filter condition will be added in the request to the API service (`searchText` parameter). I will ask you to clarify, what is the difference in the  behavior on your side. Thank you in advance for the cooperation!

What I’ve noticed in your source code is that when you are filtering the autocomplete and building your URL in the service, then for example when you are filtering with ‘www’ the URL to the service is: https://nodejs.pub.pgtel.net/api/autocomplete/zip/city/www?skip=0&top=40&count=true

I believe you are aware that the service is not returning data, when filtered in that way. The same is valid when you want to load all the records (when `top` parameter is not presented): https://nodejs.pub.pgtel.net/api/autocomplete/zip/city/?skip=0&count=true . Those are things that needs to be addressed by the API service.

I hope my answer will be helpful for you!

Regards,

Monika Kirkova,

Infragistics

Yes that is correct, as the initial sample loads 20 i want to be able to load additional data if there is any past the set 20. The Sample on Remote Data for the autocomplete implements partial code to do so. There is no reason to limit something to 20 if there is no way to get additional data.

Also on the Remote API is not the issue as the TOP nbr is a required value if its not provide we dont return data. The issue at hand is why the code request data with no filter if you delete a value in the txt box which did not match any remote data. When i enter the www and it returns nothing and on clicking the X it will fire of a new query with no filter string. If i go pick a valid value and then delete via X it goes and deletes the text from control without firing a new blank search request. This is not only the behavoir on my code but also your published remote data sample on autocomplete control

I guess i cant expect an answer on this as 8 days and no reply