如何自定义react-select搜索筛选规则，忽略label中Item ID后缀匹配

react-select默认会匹配选项整个label字段的内容，由于你所有选项的label都包含「Item ID」字符，因此输入对应关键词时会返回全部选项。你可以通过组件提供的filterOption属性自定义搜索匹配逻辑，忽略label末尾的ID后缀部分即可，以下是两种实现方案：

方案1：直接处理label（无需修改原有选项定义） #

新增自定义过滤函数，通过正则移除label末尾的ID后缀后再做匹配：

// 自定义搜索过滤逻辑
const filterOption = (option, inputValue) => {
  // 移除label末尾的 (Item ID : 数字) 后缀
  const pureItemName = option.label.replace(/\s*\(Item ID\s*:\s*\d+\)$/, '');
  // 不区分大小写匹配输入内容
  return pureItemName.toLowerCase().includes(inputValue.trim().toLowerCase());
};

再把该函数传给Select组件的filterOption属性即可：

<Select
  placeholder="Select Name"
  options={options}
  formatGroupLabel={formatGroupLabel}
  classNamePrefix="select-list"
  value={ItemOptions.filter((option) => option.value === selectedItemId)}
  onChange={filterByItemID}
  filterOption={filterOption} // 新增这一行
/>

方案2：新增专属搜索字段（性能更优） #

如果选项数据量较大，可提前定义搜索专用字段，避免每次过滤都执行正则处理：

1. 首先修改选项生成逻辑，新增纯名称字段用于搜索：

const ItemOptions: SelectValueInterface[] = Item.map((e) => ({
  value: e.ItemId,
  label: `${e.ItemName} (Item ID : ${e.ItemId})`,
  searchKey: e.ItemName // 新增纯名称字段，仅用于搜索匹配
}));

2. 对应修改过滤函数：

const filterOption = (option, inputValue) => {
  return option.searchKey.toLowerCase().includes(inputValue.trim().toLowerCase());
};

3. 同样把filterOption传入Select组件即可，用法和方案1一致。

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