如何让React-Select的首尾选项在搜索时始终保留？

你的问题出在原过滤器里用option.index判断首尾选项，但react-select传给filterOption的option对象根本没有index属性，所以这个条件永远不会生效，导致首尾选项还是会被过滤。

下面给你两种可行的解决方案：

方案一：给目标选项添加专属标识 #

直接在你的options数组里，给需要始终显示的选项加一个自定义属性（比如alwaysVisible），然后在过滤器里判断这个属性：

// 先修改options数组，给首尾选项加标识
const options = [
  { value: 'first', label: 'First Option', alwaysVisible: true },
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'last', label: 'Last Option', alwaysVisible: true },
];

// 自定义过滤器
const customFilter = (option, rawInput) => {
  const inputValue = rawInput.toLowerCase();

  // 无搜索输入时显示全部
  if (!inputValue) {
    return true;
  }

  // 标记了alwaysVisible的选项直接保留
  if (option.alwaysVisible) {
    return true;
  }

  // 其他选项正常过滤
  return (
    option.label.toLowerCase().includes(inputValue) ||
    option.value.toLowerCase().includes(inputValue)
  );
};

// 渲染组件
return (
  <Select
    options={options}
    isSearchable={true}
    filterOption={customFilter}
  />
);

方案二：直接对比原数组的首尾选项 #

如果不想修改options数组，可以通过选项的唯一标识（比如value）对比原数组的首尾元素：

const customFilter = (option, rawInput) => {
  const inputValue = rawInput.toLowerCase();

  if (!inputValue) {
    return true;
  }

  // 通过value判断是否是首尾选项（确保value唯一）
  const isFirst = option.value === options[0].value;
  const isLast = option.value === options[options.length - 1].value;

  if (isFirst || isLast) {
    return true;
  }

  // 其他选项正常过滤
  return (
    option.label.toLowerCase().includes(inputValue) ||
    option.value.toLowerCase().includes(inputValue)
  );
};

// 渲染组件不变
return (
  <Select
    options={options}
    isSearchable={true}
    filterOption={customFilter}
  />
);

两种方案都能实现首尾选项始终显示，不会被搜索过滤掉，你可以根据自己的需求选择。

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