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.

score 6 · Answer 1 · answered Jul 31 '19 at 07:52

6

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

answered Jul 31 '19 at 07:52

user721730

438
1
7
11

score 2 · Answer 2 · edited Oct 12 '18 at 07:15

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='';
}

edited Oct 12 '18 at 07:15

Unheilig

16,196
193
68
98

answered Oct 12 '18 at 06:45

vinod j

83
1
12

I had to use << this.text=undefined; >> – Olivier Tonglet Dec 08 '21 at 10:21

score 0 · Answer 3 · answered Jul 20 '18 at 17:49

0

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.

answered Jul 20 '18 at 17:49

user8019967

1
1

PrimeNg Angular2 Autocomplete Clear all

3 Answers3