时间戳

首页 > 解决方案 > 过滤具有多个字符串值的对象

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

问题描述

我正在尝试使用与用户在输入中写入的字符串匹配的元素来过滤对象。我正在使用 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”不显示任何内容并且它应该显示第一个选项。

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

标签： reactjsfilterautosuggest

解决方案

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

或者

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

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

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

推荐阅读