CODEWITHSUNDEEP
javascriptangulartypescriptprimeng
Eugene Sukh
Eugene Sukh

Reputation: 2737

Result is not display in autocomplete (Angular)

I use ng-prime <p-autocomplete> for display values via search in the back-end

here is my html

<p-autoComplete [(ngModel)]="agent" [suggestions]="filteredAgents" name="agents" (completeMethod)="filterAgents($event)"  [size]="10"
                    placeholder="Agents" [minLength]="3"></p-autoComplete>

At the component.ts I initialize array like this at start of the component

filteredAgents: string[] = [];

and I have a method to send query to back end and push it to array

 filterAgents(event) {
    let query = event.query;
    this._agentsService.getAgentSearch(query).subscribe(result => {
      result.items.forEach((value) => {
            this.filteredAgents.push(value.name);
            console.log(this.filteredAgents);
       });
    });
}

I see filtered value in console, but I don't see it in suggestions.

Where can be my problem?

Upvotes: 0

Views: 1058

Answers (2)

Qellson
Qellson

Reputation: 552

AutoComplete either uses setter based checking or ngDoCheck to realize if the suggestions has changed to update the UI. This is configured using the immutable property, when enabled (default) setter based detection is utilized so your changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. ( Angular documentation )

Array.prototype.push doesnt create a new reference it rather mutates the original array. So you need to make a new one.

 filterAgents(event) {
    let query = event.query;
    this._agentsService.getAgentSearch(query).subscribe(result => {
            this.filteredAgents = [...result.items.map(e => e.name)]
        });
    }

I maped the result to extract the names.

Upvotes: 1

Hari Pillai
Hari Pillai

Reputation: 741

If filtered agents is an object array try adding field="name" to the directive attributes.

Here name is a field in the object. The directive uses this field to display in suggestions

Upvotes: 0

Related Questions