在 react-select 中订购搜索结果

Question

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

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

Answer 1

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

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

createFilter从哪里进口react-select

Answer 2

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

如果您想根据用户查询的内容显示更好的匹配项，请将match-sorter与onInputChangeof结合使用react-select以创建自定义过滤器。这是一个工作演示。

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