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

Autocomplete close popup when new items added to array.

Thread ID:

Created:

Updated:

Platform:

Replies:

143713 Apr 2,2019 07:55 AM UTC Apr 4,2019 11:19 AM UTC Angular - EJ 2 3
loading
Tags: AutoComplete
Marko
Asked On April 2, 2019 07:55 AM UTC

Hi Team,

I have problem with autocomplete. When I send request to API server and get results back, popup will show results and when new items added then will close popup.
you can see example of code.

https://stackblitz.com/edit/angular-aoglhv

Christopher Issac Sunder K [Syncfusion]
Replied On April 3, 2019 12:09 PM UTC

Hi Marko, 

Greetings from Syncfusion!!! 

We have checked shared sample and you have manually processed the query based on search text. By default, Inbuilt support has been provided in AutoComplete to get the data and generate list based on search text. So You can directly pass your service url in the pipe method. Please find code snippet and modified sample. 

constructor(private http: HttpClient) { 
    this.data = this.http.get<{ [key: string]: object; }[]>('https://swapi.co/api/people/').pipe( 
        map((args: any) => { 
            return args.results; 
        }) 
    ); 
} 

We have checked your index.html file and you have referred ej1 css. please refer ej2 css


Please let us know if you require any further assistance. 

Thanks, 
Christo 


Marko
Replied On April 3, 2019 08:15 PM UTC


Prince Oliver [Syncfusion]
Replied On April 4, 2019 11:19 AM UTC

Hi Marko, 

Thanks for the update.  

The cause of the problem in AutoComplete component is due to binding this.data.  During initial rendering, the data is not returned after the async pipe call back function sets the data and filtering request is send to the API service. So, the popup gets hidden. 

To use map in search functionality, we suggest you create new global variable(this.filterData), while filtering and get the result from this.filterData in the subscribe method. The result is then sent to updateData() method. Kindly refer to the following code. 

public filterArgs: any; 
constructor(private http: HttpClient) { 
    let _this = this; 
    const api: string = 'https://swapi.co/api/people/?search=' 
    this.filterData = this.searchTerm$ 
        .pipe( 
            debounceTime(300), 
            distinctUntilChanged(), 
            switchMap((s: string) => this.http.get(`${api}${s}`)), 
            map(r => r.results) 
        ); 
    this.filterData.subscribe(r => { 
        _this.filterArgs.updateData(r); 
        _this.autoObj.hideSpinner(); 
        console.log(r) 
    }); 
} 
 
onFiltering(args: FilteringEventArgs): void { 
    args.preventDefaultAction = true; 
    this.filterArgs = args; 
    this.autoObj.showSpinner(); 
    this.searchTerm$.next(args.text); 
} 

We have attached the modified sample for your reference, please find the sample at the following location 

Note: In your sample you have added debounceTime method, so the popup opens and closes slowly. 

Let us know if you need any further assistance on this. 

Regards, 
Prince 


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