PrimeNG v12 MultiSelect 服务端搜索后选项未实时更新问题

场景复现 #

初始状态下MultiSelect组件加载100条初始选项，若用户输入的搜索内容不在初始选项列表内，将在keyup.enter回车事件中触发服务端搜索逻辑，组件实现代码如下：

<p-multiSelect 
    [options]="options"
    class="multi-select-dropdown"
    [maxSelectedLabels]="0"
    resetFilterOnHide="true"
    [(ngModel)]="selectedValues"
    (onChange)="onChange($event)"
    (keyup.enter)="onSearchFilter($event)"
    [defaultLabel]="placeholder"
    [virtualScroll]="true"
    itemSize="25"
    [style]="{'min-width':'100%', 'max-width':'100%'}">
</p-multiSelect>

异常表现 #

• 用户搜索类似W101这类不存在于初始列表的内容时，组件首先展示No results found无结果提示
• 用户按下回车键触发服务端搜索，成功获取过滤结果并更新绑定的options变量后，MultiSelect下拉面板未同步渲染新选项，仍停留显示无结果提示
• 仅当点击搜索框旁的清除图标(x)后重新展开下拉面板，才会正常展示已拉取到的过滤后选项列表

问题出现在PrimeNG v12版本。

根因 #

PrimeNG v12的MultiSelect组件内置前端过滤逻辑会独立维护内部的可见选项列表、无结果标记状态：当用户输入内容触发内置过滤匹配不到任何初始选项时，组件会直接将内部可见选项列表置空、标记无结果状态，此时仅修改外层绑定的options输入属性，不会触发组件内部过滤状态重置，下拉面板渲染读取的是组件内部缓存的过滤结果，因此不会同步显示更新后的选项。

修复方案 #

方案1：保留内置过滤，更新选项后主动重置组件状态 #

该方案不需要改动现有交互逻辑，只需要拿到组件实例，在服务端返回结果后手动重置内部过滤状态、强制更新可见选项即可。

1. 给模板中的p-multiSelect添加模板引用变量，同时将组件实例传入搜索事件方法：

<p-multiSelect 
    #multiSelectRef
    [options]="options"
    class="multi-select-dropdown"
    [maxSelectedLabels]="0"
    resetFilterOnHide="true"
    [(ngModel)]="selectedValues"
    (onChange)="onChange($event)"
    (keyup.enter)="onSearchFilter($event, multiSelectRef)"
    [defaultLabel]="placeholder"
    [virtualScroll]="true"
    itemSize="25"
    [style]="{'min-width':'100%', 'max-width':'100%'}">
</p-multiSelect>

2. 在搜索方法中，服务端结果返回、更新options后调用组件方法重置状态：

import { MultiSelect } from 'primeng/multiselect';

// ...
onSearchFilter(event: KeyboardEvent, multiSelectComp: MultiSelect) {
  const searchKey = (event.target as HTMLInputElement).value.trim();
  if (!searchKey) return;

  this.serverSearchApi(searchKey).subscribe(filteredOptions => {
    this.options = filteredOptions;
    // 重置内置过滤状态
    multiSelectComp.resetFilter();
    // 同步更新可见选项列表，触发变更检测
    setTimeout(() => {
      multiSelectComp.visibleOptions = [...filteredOptions];
      multiSelectComp.cd.markForCheck();
    }, 0);
  });
}

方案2：禁用内置前端过滤，完全接管搜索逻辑 #

如果业务场景不需要组件自带的前端匹配过滤，所有搜索结果都来自服务端，可以直接关闭组件内置过滤，从根源避免内部状态不同步的问题：

<p-multiSelect 
    [options]="options"
    [filter]="false"
    class="multi-select-dropdown"
    [maxSelectedLabels]="0"
    resetFilterOnHide="true"
    [(ngModel)]="selectedValues"
    (onChange)="onChange($event)"
    (keyup.enter)="onSearchFilter($event)"
    [defaultLabel]="placeholder"
    [virtualScroll]="true"
    itemSize="25"
    [style]="{'min-width':'100%', 'max-width':'100%'}">
</p-multiSelect>

注意：禁用内置过滤后组件不会再主动匹配本地选项、提前弹出无结果提示，所有搜索逻辑完全由业务侧控制，回车触发服务端搜索后直接更新options即可正常渲染结果。

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