PrimeNg Angular2 Autocomplete Clear all

Question

Right now, I am using primeng autocomplete dropdown and in this we don't have functionality of clear/reset.

When i selecting a result from droplist, a clear/reset icon (x) should appears in input and click on (x) it will clear the inputbox.

<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
            [dropdown]="true"></p-autoComplete>

Anyone have any better solution for this.

Dorwin

Answer 1

Just add type=search <p-autocomplete type="search" ...>

Nunatak

Answer 2

<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)" [dropdown]="true"></p-autoComplete>
<i class="fa fa-reset" (click)="onClear()"></i>       

onClear(){
    this.text='';
}

Lightner

I had to use << this.text=undefined; >> – Chamaeleon

Answer 3

You can use PrimeNg Chip. When an option is selected from the dropdown you can display the value in a chip which as a close button on it. This is the cleanest and most visually pleasant way to do it.

Santalaceous