如何在PrimeNG p-autocomplete中禁用特定建议项的选择与键盘事件？

这其实是个挺常见的需求，我来一步步帮你搞定——你已经处理了鼠标点击的阻止，现在重点要解决键盘事件的拦截，同时确保禁用项完全无法被选中。咱们分几个环节来实现：

1. 先给禁用项添加标识 #

首先要在你的数据源里给需要禁用的选项加个标记字段（比如disabled），这样后续能方便识别哪些是要禁用的项：

// 示例数据源，根据你的实际数据调整
suggestions = [
  { label: "正常可选项1", value: "option1" },
  { label: "禁用选项A", value: "option2", disabled: true },
  { label: "正常可选项2", value: "option3" },
  { label: "禁用选项B", value: "option4", disabled: true }
];
filteredSuggestions: any[] = [];

2. 模板层处理：视觉提示+鼠标点击阻止 #

你已经用(click)和stopPropagation()处理了鼠标点击，这里可以优化下视觉效果，给禁用项加个灰化样式，让用户一眼能看出来：

<p-autocomplete 
  [(ngModel)]="selectedValue" 
  [suggestions]="filteredSuggestions" 
  (completeMethod)="filterSuggestions($event)"
  field="label"
  (onKeyDown)="handleKeyDown($event)"
  (onSelect)="handleSelect($event)"
>
  <ng-template let-option pTemplate="item">
    <div 
      [class.disabled-option]="option.disabled"
      (click)="option.disabled && $event.stopPropagation()"
    >
      {{ option.label }}
    </div>
  </ng-template>
</p-autocomplete>

再加上CSS样式：

.disabled-option {
  color: #cccccc;
  cursor: not-allowed;
  user-select: none;
}

3. 键盘事件拦截：跳过禁用项+阻止选中 #

这是核心部分，要处理方向键导航（上下箭头）跳过禁用项，同时阻止回车键选中禁用项：

首先在组件里获取Autocomplete实例，然后实现键盘事件处理方法：

import { Component, ViewChild } from '@angular/core';
import { AutoComplete } from 'primeng/autocomplete';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChild(AutoComplete) autocomplete!: AutoComplete;
  selectedValue: any;
  // 上面的suggestions和filteredSuggestions定义不变

  filterSuggestions(event: any) {
    // 你的过滤逻辑，比如：
    const query = event.query.toLowerCase();
    this.filteredSuggestions = this.suggestions.filter(item => 
      item.label.toLowerCase().includes(query)
    );
  }

  handleKeyDown(event: KeyboardEvent) {
    const activeIndex = this.autocomplete.activeIndex;
    if (activeIndex === -1) return;

    const activeOption = this.filteredSuggestions[activeIndex];
    if (!activeOption.disabled) return;

    // 阻止回车键选中禁用项
    if (event.key === 'Enter') {
      event.preventDefault();
      event.stopPropagation();
    } 
    // 方向键导航时跳过禁用项
    else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      event.preventDefault();
      this.navigateToNextValidOption(event.key);
    }
  }

  private navigateToNextValidOption(key: string) {
    let newIndex = this.autocomplete.activeIndex;
    const totalItems = this.filteredSuggestions.length;

    // 循环查找下一个非禁用选项
    do {
      if (key === 'ArrowDown') {
        newIndex = (newIndex + 1) % totalItems;
      } else {
        newIndex = (newIndex - 1 + totalItems) % totalItems;
      }
    } while (this.filteredSuggestions[newIndex].disabled);

    this.autocomplete.activeIndex = newIndex;
    // 可选：自动滚动到高亮的选项
    const targetItem = document.querySelector(`.p-autocomplete-items li:nth-child(${newIndex + 1})`);
    targetItem?.scrollIntoView({ block: 'nearest' });
  }
}

4. 最后一道防线：拦截选中事件 #

防止通过其他方式（比如自动匹配）选中禁用项，监听onSelect事件进行拦截：

handleSelect(event: any) {
  if (event.value.disabled) {
    // 清除错误选中的值
    this.selectedValue = null;
    event.stopPropagation();
  }
}

这样一套操作下来，你的禁用项既不能被鼠标点击选中，键盘导航会自动跳过它们，也无法通过回车键或自动匹配选中，完全达到你的需求啦~

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