如何实现Primeng Multiselect下拉框选中项置顶？

你需要将PrimeNG Multiselect下拉列表中的已选中项移至顶部，之前尝试的排序代码无效，原代码如下：

items.sort((a:any, b:any) => {
        let IndexA = selected.findIndex(((i:any) => i == a[key]));
        let IndexB = selected.findIndex(((i:any) => i == b[key]));
return 0;
});

问题分析 #

原代码的核心问题是sort函数始终返回0，这会让数组保持原顺序，完全起不到排序作用；同时仅通过findIndex获取索引但未利用索引值做排序逻辑判断，无法区分选中项与非选中项的优先级。

实现方案 #

直接对数据源进行排序，将已选中项前置，非选中项保持原顺序即可。

基础排序逻辑

假设items是下拉选项数据源，selected是已选中项数组，key是用来匹配选项与选中项的唯一标识字段（如id）：

items.sort((a: any, b: any) => {
  // 判断当前项是否在选中数组中
  const isASelected = selected.some(item => item === a[key]);
  const isBSelected = selected.some(item => item === b[key]);

  // 选中项优先级高于未选中项
  if (isASelected && !isBSelected) return -1; // A选中B未选，A排前
  if (!isASelected && isBSelected) return 1;  // B选中A未选，B排前
  return 0; // 同状态保持原顺序
});

选中变化时自动重排

如果需要在用户选中/取消选中时自动更新下拉列表顺序，可绑定组件的onChange事件触发重排：

模板代码

<p-multiSelect 
  [options]="items" 
  [(ngModel)]="selected" 
  (onChange)="handleSelectionChange()"
></p-multiSelect>

组件逻辑

handleSelectionChange() {
  this.items.sort((a: any, b: any) => {
    const isASelected = this.selected.some(item => item === a.id); // 替换为你的匹配字段
    const isBSelected = this.selected.some(item => item === b.id);
    if (isASelected && !isBSelected) return -1;
    if (!isASelected && isBSelected) return 1;
    return 0;
  });
}

注意事项 #

• 如果需要保留原数据源的初始顺序，可先复制一份数组再排序（如[...this.items].sort(...)），避免修改原数组。
• 若选项是复杂对象，确保some方法中的匹配逻辑准确（比如对比对象的唯一标识字段，而非直接对比对象引用）。

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