使 PrimeNG 自动完成建议列表出现在焦点上

Question

希望你们一切都好。我目前正在努力解决 PrimaryNG 的 AutoComplete（多模式）组件行为。

我想要什么

我希望每当组件处于焦点时就会出现自动完成建议列表。

我尝试过的

按照默认的 primeNG 默认输入属性设置建议以出现在焦点上 [(CompleteOnFocus=True)] 部分有效。现在，每当我第一次单击“自动完成”组件时，就会出现“自动完成”建议。但是，从建议中选择一个项目后，建议列表就会消失（我希望它保持打开状态）。为了使建议再次出现，我必须单击外部以取消组件的焦点，然后再次单击组件以重新聚焦它。 （参见第一个 stackblitz 组件）

我可以通过传入引用并将其发送到 (onHide) 函数来显示建议列表，如下所示：

<p-autoComplete #autocomplete [multiple]="true" [(ngModel)]="selectedItem" 
[suggestions]="suggestions" (completeMethod)="search($event)" 
(onHide)="refocus(autocomplete)"> </p-autoComplete>

然后使用以下命令触发显示功能：

import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
public refocus(autocomplete: AutoComplete) {
autocomplete.show();
}

但事实证明，当我从建议列表中选择多个项目然后将它们全部删除时，它会中断；建议列表不再显示。 （参见第二个stackblitz组件）

Answer 1

您可以使用 (onFocus),(onHide) 事件直接使用模板引用来触发 show() 方法。即使在多次删除、聚焦、重新聚焦之后，我还是得到了建议。

<span class="p-fluid">
<p-autoComplete #autocomplete
[(ngModel)]="selectedCountries"
[suggestions]="filteredCountries"
(completeMethod)="filterCountry($event)"
field="name"
[multiple]="true"
display="chip"
[forceSelection]="true"
[completeOnFocus]="true"
(onFocus)="autocomplete.show()" <----------- onFocus
(onHide)="autocomplete.show()"  <----------- onHide
>
<ng-template let-country pTemplate="item">
  <div
    *ngIf="country.isSelected"
    style="text-decoration: line-through; opacity: 50%"
  >
    {{ country.name }}
  </div>
  <div *ngIf="!country.isSelected">{{ country.name }}</div>
</ng-template>
</p-autoComplete>
</span>