按下回车后清除 p-autocomplete primeng

Question

Using PrimeNG auto-complete, I have the following html.

<p-autoComplete
    id="autocomplete"
    [(ngModel)]="termToSearch"
    [minLength]=1
    [suggestions]="suggestedData"
    (completeMethod)="search($event)"
    placeholder="Search by name..."
    (onSelect)="goToDetailPage($event)"
    (onClear)="clearInput()"
    (keydown.enter)="onSearchSubmit($event)"
    [forceSelection]=false>
 </p-autocomplete>

when the user hits the 'enter' key instead of selecting one of the options in the dropdown, I have a onSearchSubmit function.

That function looks like this:

clearInput() {
    this.termToSearch = null;
  }

  clearSuggestions() {
    this.suggestedData = null;
  }

 onSearchSubmit(event) {
    this.clearSuggestions();
    this.clearInput();
    // before we do a general search for whatever was entered, hide the suggestions dropdown
    this.router.navigate(["/search/results"], {queryParams: { q: event.target.value }});
}

For the most part, this works, yet at the same time it doesn't. It clears the suggestion list, but it doesn't hide the entire suggestion dropdown, so the UI ends up looking like this:

Answer 1

1. Whenever need to clear the suggestion list use this

   this.suggestedData = []

2. To close the suggestion dropdown manually use primeNg autocomplete component .hide()

   AutoComplete.hide()

Implementation In HTML

<p-autoComplete
    id="autocomplete"
    #autocomplete
    [(ngModel)]="termToSearch"
    [minLength]=1
    [suggestions]="suggestedData"
    (completeMethod)="search($event)"
    placeholder="Search by name..."
    (onSelect)="goToDetailPage($event)"
    (onClear)="clearInput()"
    (keydown.enter)="autocomplete.hide();onSearchSubmit($event)"
    [forceSelection]=false>
 </p-autocomplete>

In its TS add import { AutoComplete } from 'primeng/autocomplete';

@ViewChild('autocomplete') autocomplete:AutoComplete;