Question

我正在使用Ant Design的Select component。我想在搜索中使用选项组。

要求：

选项分组到OptGroups
搜索适用于选项（而非OptGroup）
选项值是数字（数据库中的ID），而不是文本
搜索对重音符号不敏感（例如，当我输入ca时，应提供选项čaj）

前三个需求即开即用：

  <Select 
    showSearch
    defaultValue="2"
    style={{ width: 200 }}
    optionFilterProp="children"
  >
    <OptGroup label="Manager">
      <Option value="1">Jack</Option>
      <Option value="2">Lucy</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="3">yiminghe</Option>
    </OptGroup>
  </Select>

问题始于第四个要求。似乎我需要提供自己的过滤器。幸运的是，AntDesign为此提供了一个属性，称为filterOption。试试吧：

  <Select 
    showSearch
    defaultValue="2"
    style={{ width: 200 }}
    filterOption={(input, option) => 
        prepareStrForSearch(option.props.children).includes(prepareStrForSearch(input))
    }
  >
    <OptGroup label="Manager">
      <Option value="1">Jack</Option>
      <Option value="2">Lucy</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="3">yiminghe</Option>
    </OptGroup>
  </Select>

页面呈现，让我们尝试搜索。 kes。浏览器尖叫：

很明显，filterOption收到OptGroup而不是Option进行过滤。但是，我需要搜索“选项”而不是“ OptGroups”。实现此目的最简单的方法是什么？

Answer 1

解决方案是针对OptGroup使用return false。（对我来说似乎是违反直觉的。）然后，Ant Design将使用filterOption s再次调用Option函数。

这是一个例子：

  <Select 
    showSearch
    defaultValue="2"
    style={{ width: 200 }}
    filterOption={(input, option) => {
      if (option.props.value) {
          return strForSearch(option.props.children).includes(
              strForSearch(input)
          );
      } else {
          return false;
      }
    }}>
    <OptGroup label="Manager">
      <Option value="1">Jack</Option>
      <Option value="2">Lucy</Option>
      <Option value="3">Čaj</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="3">yiminghe</Option>
    </OptGroup>
  </Select>

我删除音符的功能：

const strForSearch = str => {
  return str
    ? str
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .toLowerCase()
    : str;
};

在带有OptGroup的Ant Design Select Component中搜索时忽略变音符号

1 个答案: