autoComplete primeNG. Show more than one attribute

Question

I am using an autocomplete of ng-prime with an object, "Employee" that inside has "Person" and inside the "name", "surname 1" and "surname 2"

 <p-autoComplete [(ngModel)]="empleado" [suggestions]="filteredEmpleadosSingle" (completeMethod)="filterEmpleadoSingle($event)"
            field="persona.nombre" [minLength]="3" [forceSelection]="true">
            <ng-template let-empleado pTemplate="item">
                <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
                    <div style="font-size:18px;float:left;margin:10px 10px 0 0">{{empleado.persona.nombre}} {{empleado.persona.apellido1}} {{empleado.persona.apellido2}}</div>
                </div>
            </ng-template>
 </p-autoComplete>

In the suggestion if I have gotten that name jumps with the two surnames.

When I select one in particular, it only shows the name in the input.

The property "field =" person.name "only supports one attribute, and I need to put all three.

How can I do, so that it shows me name, surname 1 and surname 2 when I select an item of the autocomplete.

"primeng": "5.2.4"

Thank you

Answer 1

In multiple mode, selected item can be customized using selectedItem ng-template. Note that this template is not supported in single mode.

<p-autoComplete [(ngModel)]="customer" [suggestions]="customerResults" (completeMethod)="searchCustomers($event)" [multiple]="true">
  <ng-template let-customer pTemplate="selectedItem">
    {{customer.name}} {{customer.firstname}}
  </ng-template>
  <ng-template let-customer pTemplate="item">
    {{customer.name}} {{customer.firstname}}
  </ng-template>
</p-autoComplete>