PrimeNG多选AutoComplete聚焦时始终显示建议列表问题求助

问题分析 #

• 使用completeOnFocus="true"仅首次聚焦生效，选择项后列表消失，需失焦再聚焦才会重新显示
• 通过onHide事件调用show()，在选中多项后全部删除时，建议列表无法正常显示

可行解决方案 #

核心是结合focus事件和组件状态判断，确保每次聚焦时强制触发建议列表显示，同时处理全删后的异常场景：

1. 模板代码调整

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

2. TypeScript逻辑实现

import { AutoComplete } from 'primeng/autocomplete';

// 处理组件聚焦事件
handleFocus(autocomplete: AutoComplete) {
  // 先触发搜索确保建议列表数据是最新的
  this.search({ query: '' });
  // 强制显示建议列表
  autocomplete.show();
}

// 保留原有搜索逻辑
search(event: any) {
  const query = event.query.toLowerCase();
  // 替换成你的数据源过滤逻辑
  this.suggestions = yourDataSource.filter(item => item.label.toLowerCase().includes(query));
}

3. 全删选中项后的补充处理
   如果需要在删除所有选中项后自动显示列表，可添加ngModelChange监听：

<p-autoComplete 
  #autocomplete 
  [multiple]="true" 
  [(ngModel)]="selectedItem" 
  [suggestions]="suggestions" 
  (completeMethod)="search($event)"
  (onFocus)="handleFocus(autocomplete)"
  (ngModelChange)="handleModelChange($event, autocomplete)"
></p-autoComplete>

handleModelChange(value: any[], autocomplete: AutoComplete) {
  // 当选中项全删且组件处于聚焦状态时，重新显示列表
  if (value.length === 0 && autocomplete.focused) {
    this.search({ query: '' });
    autocomplete.show();
  }
}

失效原因说明 #

• completeOnFocus在多选模式下，组件内部会记录已选状态，选择项后会自动隐藏列表，仅首次触发生效
• onHide事件中调用show()会触发循环调用，且全删选中项后组件内部focused状态异常，无法正确触发显示

内容的提问来源于stack exchange，提问作者Fahim Foysal