CODEWITHSUNDEEP
angulareventsangular8primengangular-components
Suraj Nair
Suraj Nair

Reputation: 561

completeMethod event not triggering in primeNG Autocomplete on focus

I am trying to use the autocomplete component in my application. The autocomplete in the HTML looks something like this:

<p-autoComplete [(ngModel)]="student" name="basic"
  [suggestions]="filteredStudents"
  (completeMethod)="filterStudents($event)"
  field="name" [size]="30"
  placeholder="Select student" [minLength]="0">
</p-autoComplete>

If you notice I have specified the "minLength" as 0. The need for this was to try load the suggestions as soon as I focus on the autocomplete input field (non-filtered of course). But unfortunately this does not happen. Interestingly though when I enter some characters and clear them off the suggestions appear as expected. Anything which I might be doing wrong here?

Just a note that I also tried to make use of the "onFocus" event which too did not work.

TIA

Upvotes: 0

Views: 2077

Answers (1)

Nenad Radak
Nenad Radak

Reputation: 3678

Using handleDropdownClick() can be used as workaround.

<p-autoComplete #ac [(ngModel)]="student" name="basic"
 [suggestions]="filteredStudents"
 (onFocus)="triggerOverlayPanel(ac)"
 (completeMethod)="filterStudents($event)"
 field="name" [size]="30"
 placeholder="Select student" [minLength]="0">
</p-autoComplete>

ts file.

AutoComplete ref trigger handleDropdownClick() as if user clicked on dropdown and as argument add self.

 triggerOverlayPanel(ac: AutoComplete){
  // condition added to check if no chars need to display result 
  if(ac.minLength === 0) {
   ac.handleDropdownClick(ac);
  }
 }

Upvotes: 1

Related Questions