在 react-select 中排序搜索结果答案

【问题标题】：Order search results in react-select在 react-select 中排序搜索结果
【发布时间】：2019-07-24 21:41:11
【问题描述】：

使用react-select 时，搜索结果默认按字母顺序排列。这是一个很好的默认值，但如果我有一个不是按字母顺序排列的完全匹配，那就不是很好了。例如，用户可能有以下选项：

a_react
b_react
c_react
d_react
反应

使用这些选项，用户可以搜索“react”，而不是更接近选择与搜索词完全匹配的选项。有什么方法可以优化精确匹配吗？

【问题讨论】：

您可以传递自己的filterOption 来更改过滤方式
@JohnRuddell 啊，很好，我在文档中搜索了“搜索”和“结果”，但没有找到任何东西，很好的发现。我找到了this example，但任何其他示例都有帮助。随意将其更改为答案，以便我接受。
看起来那个特定的例子正是你想要的！ :) 我会写一个关于filterOption 的答案，这样我们就可以结束这个问题了:)

标签： reactjs react-select

【解决方案1】：

在react-select 中，您可以传递filterOption 属性来更改过滤的工作方式。他们提供了一个很好的 api 来做你想做的事，即从字符串的开头而不是字符串中的任何地方开始匹配。看起来像这样

filterOption={createFilter({ matchFrom: "start" })}

其中createFilter 是从react-select 导入的

【讨论】：

我将它与 CreatableSelect 一起使用，它不允许我创建新选项

【解决方案2】：

react-select 有一个道具，如果你想有一个自定义过滤器 - filterOption。

如果您想根据用户查询的内容显示更好的匹配，请结合使用 match-sorter 和 react-select 中的 onInputChange 来创建自定义过滤器。这是working demo。

有两个选择输入。输入l 并观察建议的差异。

【讨论】：

再想一想，我不确定它是否适用于react-select。我在 Github 上找不到任何两人配合得很好的例子。
我用一个工作演示更新了我的答案。我应该更清楚。 filterOption 与此无关。 onInputChange 和 matchSorter 可以组合来实现。
似乎不建议绕过预期的道具filterOption。似乎传递一个新的选项对象可能会破坏内置优化。
@Slbox 你可能是对的。但是，react-select 文档中没有此类警告。由于onInputChange 是一个暴露的道具，我只是将其视为对那些想要进一步控制过滤的人进行更深层次的定制。

【解决方案3】：

@ron4ex 在这里有一个很好的答案。只是想提供另一个类似的解决方案，因为我在匹配排序器方面遇到了一个大问题。

match-sorter 的问题：

我的列表是家庭关系列表，例如“母亲”、“岳母”
当我开始打字时，match-sorter 会优先考虑岳母而不是母亲。只有在完全匹配时才会优先考虑母亲。但是，react-select 将重点选项保留为婆婆。
即使我可以解决默认焦点问题，我也宁愿在“mother-in-law”之前“mot”匹配“mother”。

输入新的解决方案：Fuse:

与匹配排序器类似的实现
具有大量自定义选项的模糊搜索
默认配置排序“母亲”而不是“岳母”

const fuse = new Fuse(relationshipTypes, { keys: ["label"] });

<Select>
  onInputChange={inputValue => {
    setRelationshipOptions(
      fuse.search(inputValue).map(value => value.item)
    );
  }}
</Select>

请注意 fuse.search 上的映射，因为 fuse 返回一个变异数组，其中项目键中的原始值和第二个键是索引。因此，fuse.search().map

【讨论】：