Autocomplete close popup when new items added to array.

[Marko]

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]

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. 

Sample Link: https://stackblitz.com/edit/angular-hvt5su?file=src%2Fapp%2Fapp.component.ts 

Please let us know if you require any further assistance. 

Thanks, 

Christo 

[Marko]

Hi Christo,

I wan't use map in search functionality.

https://angular-2-training-book.rangle.io/handout/http/search_with_switchmap.html

[Prince Oliver]

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 

Sample Link: https://stackblitz.com/edit/angular-hemcqu-81pstg  

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