Well I'm following the documentation of primeNg and I can't get the autocomplete to show the suggestions

1. Added Moduleimport { AutoCompleteModule } from 'primeng/autocomplete';
2. Imported Moduleimports: [CommonModule, FormsModule, AutoCompleteModule],
3. I will show my code

my file .html shows this
<div fxLayout="column"> <div> <h1>Buscador de Héroes</h1> <p-divider></p-divider> </div> <div> <p-autoComplete [(ngModel)]="selectedHero" [suggestions]="cambiar()" (completeMethod)="filterHeros($event)" field="name" [minLength]="1"></p-autoComplete> </div>
</div>
my file component show this
import { Component, OnInit } from '@angular/core';
import { Heroe } from '../../interface/heroes.interface';
import { HeroesService } from '../../services/heroes.service';
@Component({ selector: 'app-buscar', templateUrl: './buscar.component.html', styles: [ ]
})
export class BuscarComponent implements OnInit { constructor(private heroesService: HeroesService) { } ngOnInit(): void { this.heroesService.getHeroes() .subscribe(heroes => this.heroes = heroes ); } selectedHero!: Heroe; heroes:Heroe[] = []; filteredHeros:Heroe[] = []; filterHeros(event:any){ let filtered : Heroe[]= []; let query = event.query; for (let i = 0; i < this.heroes.length; i++) { let heroe = this.heroes[i]; if (heroe.superhero.toLowerCase().indexOf(query.toLowerCase()) == 0) { filtered.push(heroe); } } this.filteredHeros = filtered; console.log(this.filteredHeros); // When I print this to the console I can see the // search results in the console, however I can't get them to show up in the autocomplete } cambiar(){ let mostrar:any[] = []; for (let i = 0; i < this.filteredHeros.length; i++){ mostrar[i] = this.filteredHeros[i].superhero } return mostrar; }
}
and my service
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Heroe } from '../interface/heroes.interface';
@Injectable({ providedIn: 'root'
})
export class HeroesService { private baseUrl: string = environment.baseUrl; constructor(private http: HttpClient) { } getHeroes():Observable<Heroe[]> { return this.http.get<Heroe[]>(`${ this.baseUrl }/heroes`) } getHeroesPorId(id:string):Observable<Heroe> { return this.http.get<Heroe>(`${ this.baseUrl }/heroes/${id}`); }
}

In the primeNg documentation it appears as

name:suggestions Type:array Default:null Description:An array of suggestions to display.

I have tried to send the array as type string[] and as any[] but without success. I hope you can help me thank you very much

1

2 Answers

Issue 1

Since you are filtering by superhero property,

Incorrect:

<p-autoComplete ... field="name">
</p-autoComplete>

Solution for Issue 1

Change as below:

<p-autoComplete ... field="superhero">
</p-autoComplete>

---

Issue 2

While in this function, you are returning a string array. While in HTML, you apply field="name", which this field attribute is worked with object array (Refer to PrimeNG | AutoComplete (Object section)).

cambiar(){ let mostrar:any[] = []; for (let i = 0; i < this.filteredHeros.length; i++){ mostrar[i] = this.filteredHeros[i].superhero } return mostrar;
}

Solution 1 for Issue 2

Return filteredHeros array

cambiar() { return this.filteredHeros;
}

OR

Solution 2 for Issue 2

Pass filteredHeros to [suggestions].

<p-autoComplete ... [suggestions]="filteredHeros">
</p-autoComplete>

Sample Demo on StackBlitz

try using cambiar method inside the filterHeros method, like this,

filterHeros(event:any){ let filtered : Heroe[]= []; let query = event.query; for (let i = 0; i < this.heroes.length; i++) { let heroe = this.heroes[i]; if (heroe.superhero.toLowerCase().indexOf(query.toLowerCase()) == 0) { filtered.push(heroe); } } this.filteredHeros = filtered; this.cambiar(); }

Because it is updated only on load, we have updated on (completeMethod) event also to get back filtered array

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.