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

Question

我正在尝试使用与用户在输入中写入的字符串相匹配的元素来过滤对象。我正在使用 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”则不会什么都不显示，它应该显示第一个选项。

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

Answer 1

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

或

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

在上面的例子中，我们将字符串拆分为数组并将子字符串与每个标记匹配

indexOf 处理子字符串检查的方式略有不同，可能会导致意外结果。

Answer 2

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

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

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

Filter object with multiple string values

filter

autosuggest

reactjs