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

Autocomplete close popup when new items added to array.

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.


3 Replies

CI Christopher Issac Sunder K Syncfusion Team 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. 


MA Marko April 3, 2019 08:15 PM UTC

PO Prince Oliver Syncfusion Team 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$ 
            switchMap((s: string) => this.http.get(`${api}${s}`)), 
            map(r => r.results) 
    this.filterData.subscribe(r => { 
onFiltering(args: FilteringEventArgs): void { 
    args.preventDefaultAction = true; 
    this.filterArgs = args; 

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. 


Live Chat Icon For mobile
Up arrow icon