点击回车后清除 p-autocomplete primeng

Question

使用 PrimeNG 自动完成，我有以下 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>

当用户点击 'enter' 键而不是选择下拉列表中的选项之一时，我有一个 onSearchSubmit 函数。

该函数如下所示：

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 }});
}

在大多数情况下，这行得通，但同时也行不通。它会清除建议列表，但不会隐藏整个建议下拉列表，因此 UI 最终看起来像这样：

Answer 1

每当需要清除建议列表时使用这个

this.suggestedData = []
要手动关闭建议下拉菜单，请使用 primeNg 自动完成组件 .hide()

AutoComplete.hide()

在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>

在其TS中添加 import { AutoComplete } from 'primeng/autocomplete';

@ViewChild('autocomplete') autocomplete:AutoComplete;

点击回车后清除 p-autocomplete primeng

Clearing p-autocomplete primeng after hitting enter

javascript

primeng

angular