在“ React Select”中的搜索选项时，是否可以包含组标签

Question

我使用react-select来允许用户从选项列表中进行搜索/过滤。但是，组标签不包括在搜索中。只是想知道是否有任何方法可以在搜索中包括组标签。

在下面的屏幕截图中，搜索“颜色”时未显示组标签“ COLORECTAL”及其选项。

Answer 1

react-select库不支持此功能。最好的解决方案是在存储库上打开问题以请求此功能，或者分叉存储库并自己实现此功能。

选择第一个选项会使您处于不确定的位置–功能请求可能永远不会得到批准和实施，或者可能要花几个月的时间。

另一种解决方案使您处于对代码库拥有所有权以及可能出现的任何现有或将来的错误的所有权的情况。

您还可以结合使用这两个选项，并在存储库上打开功能请求，并包括所需的代码更改以支持它。这可能很好，因为您将成为广泛使用的NPM程序包的贡献者。

无论哪种方式，看起来这行代码都是结合了要查询的标签和值的行：https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/filters.js#L14

我无法为您编写完整的实现，但您需要以某种方式在该字符串中包含组标签，然后找出UI来显示该组的选择状态。

Answer 2

我完全同意Nitsew。

您可以尝试从filterOption道具开始，像这样：

const filterOption = ({ label, value }, string) => {
  // default search
  if (label.includes(string) || value.includes(string)) return true;

  // check if a group as the filter string as label
  const groupOptions = groupedOptions.filter(group =>
    group.label.toLocaleLowerCase().includes(string)
  );

  if (groupOptions) {
    for (const groupOption of groupOptions) {
      // Check if current option is in group
      const option = groupOption.options.find(opt => opt.value === value);
      if (option) {
        return true;
      }
    }
  }
  return false;
};

function App() {
  return (
    <div className="App">
      <Select
        defaultValue={colourOptions[1]}
        filterOption={filterOption}
        options={groupedOptions}
      />
    </div>
  );
}

实时Code SandBox example。