过滤具有多个字符串值的对象答案

【问题标题】：Filter object with multiple string values过滤具有多个字符串值的对象
【发布时间】：2021-05-06 23:17:40
【问题描述】：

我正在尝试使用与用户在输入中写入的字符串匹配的元素来过滤对象。我正在使用 autosuggest 来呈现建议。这是我到目前为止所拥有的：

<Autosuggest
                  suggestions={options}
                  onSuggestionsFetchRequested={fetchOptions}
                  onSuggestionsClearRequested={() => setOptions([])}
                  getSuggestionValue={getSuggestionValue}
                  renderSuggestion={renderSuggestion}
                  inputProps={inputProps}
                />

我有一个道具的所有选项，我想过滤这些选项以显示与输入匹配的选项，这就是我现在过滤的方式：

const fetchOptions = async ({ value }) => {
    setSelected(null);

    value = value.toLowerCase();
    const results = props.completeOptions.filter(
      (v) => v.label.toLowerCase().indexOf(value) != -1
    );
    setOptions(limit(results)); //Here i'm setting the options hook that i use on the suggestions
  };

这是我在 redux 上拥有的 completeOptions 属性的值：

[
        {
            "id": "1",
            "label": "33 Red Case"
        },
        {
            "id": "2",
            "label": "Blue Case"
        },
        {
            "id": "3",
            "label": "1 Green Case"
        },
        ...
]

现在，如果我输入例如“Case”（这显示 3 个标签），如果我使用“33”（显示第一个标签），但如果我输入“33 case”不显示，这将完美运行任何东西，它应该显示第一个选项。

我该如何解决这个问题？是否方便拆分值并逐个搜索，是否将整个字符串一起搜索更好？

【问题讨论】：

indexOf 和类似的字符串匹配器不是“模糊的”，它们正在寻找与您的字符串完全匹配的内容，包括空格。在您的示例中，“33 case”在completeOptions 中没有匹配项，因为唯一的潜在匹配项在“33”和“case”之间具有其他内容。拆分值是一种选择，或者使用基于正则表达式的匹配器。

标签： reactjs filter autosuggest

【解决方案1】：

因为您正在寻找完整的搜索词匹配。您可以在javascript 中使用every 来检查搜索词，并在所有搜索词都匹配时返回true。您可以检查此代码。

const searchData = value.toLowerCase().split(" ");
const results = props.completeOptions.filter(v => searchData.every(word => v.label.toLowerCase().includes(word)));

【讨论】：

【解决方案2】：

您的过滤器逻辑看起来不错，当我们只想检查是否存在子字符串时，我们应该使用 v.label.toLowerCase().split(" ").includes(value)

或者

v.label.toLowerCase().split(" ").some(val => val.includes(value)

在上述情况下，我们将字符串拆分为数组，并将子字符串与每个标记匹配

indexOf 处理子字符串检查略有不同，可能会导致不希望的结果。

【讨论】：