Choices.js单选组件：如何使文本搜索返回禁用选项？

Choices.js 默认会在搜索前过滤掉禁用选项，这就是你配置了fuseOptions却搜不到禁用项的核心原因。以下是可行的修复方案：

• 修改初始化配置，关闭禁用选项的前置过滤
  调整filterOptions中的excludeDisabled参数为false，让组件将禁用选项纳入搜索池：

  const choices = new Choices('#your-select-element', {
    // 保留你的其他原有配置
    filterOptions: {
      excludeDisabled: false, // 关键：取消对禁用选项的前置过滤
    },
    fuseOptions: {
      // 你的原有Fuse.js配置，例如：
      includeScore: true,
      threshold: 0.3
    },
    // 确保禁用选项依然不可选中
    shouldDisable: (item) => item.disabled
  });
  

• 维持禁用选项的视觉与交互状态
  如果使用了自定义模板，记得保留禁用类名以保证视觉区分：

  itemTemplate: (item) => {
    const disabledClass = item.disabled ? 'choices__item--disabled' : '';
    return `<div class="choices__item ${disabledClass}">${item.label}</div>`;
  }
  

配置完成后，文本搜索会返回包含禁用选项的结果，且禁用选项依然保持不可选中的状态，完全匹配你的需求。

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