javascript - 搜索过滤器不会接受一个值的“Round”，因为“Ground”是每个结果中的一个值

Question

我正在为游泳池设计一个照片库。搜索栏会根据输入的字符更新状态，类似于 Netflix 搜索栏。它会更新 JSON 文件中的所有键，类似于在 Netflix 上搜索“Good Will Hunting”作为标题或“Matt Damon”作为演员的方式。

我遇到的问题是“圆形”将是一个常见的搜索词，在 JSON 中触发“形状”：“圆形”。但另一个类别是“类型”：“地上”或“类型”：“地下”。

因此，如果您搜索圆形池，则查询不会过滤以仅显示圆形池，因为“圆形”也会触发“地面”一词。它显示了圆形水池和任何触发“地上”或“地下”的水池的混合。

我试过弄乱 .filter 和 .includes 方法无济于事。我不确定我是否错过了那里的东西或什么。

我还将研究正则表达式以可能指示“如果搜索词“round”没有前面的字符，则显示圆形池并忽略地面触发器”。

import React, { Component } from "react";

class App extends Component {
  state = {
    filter: "",
    data: [
      {
        shape: "Round",
        type: "Above-ground"
      },
      {
        shape: "Rectangle",
        type: "In-ground"
      },
      {
        shape: "Kidney",
        type: "In-ground"
      }
    ]
  };

  handleChange = event => {
    this.setState({
      filter: event.target.value
    });
  };

  render() {
    const { filter, data } = this.state;
    const lowerCasedFilter = filter.toLowerCase();
    const filteredData = data.filter(item => {
      return Object.keys(item).some(key =>
        item[key].toLowerCase().includes(lowerCasedFilter)
      );
    });

    return (
      <div>
        <input value={filter} onChange={this.handleChange} />
        {filteredData.map(item => (
          <div>
            <p>Shape: {item.shape}</p>
            <p>Type: {item.type}</p>
            <hr />
          </div>
        ))}
      </div>
    );
  }
}

export default App;

我希望搜索过滤器仅在用户输入“round”时显示“round”池，而不是由于“ground”一词而显示多余的结果

标签： javascriptjsonreactjs

Answer 1

在数据对象的任何字段中查找一个单词是否以 lowerCasedFilter 开头

item[key].toLowerCase().split(' ').some(word => word.slice(0, lowerCasedFilter.length) === lowerCasedFilter)

  const data = [
    {
      shape: "Round",
      type: "Above-ground"
    },
    {
      shape: "Rectangle",
      type: "In-ground"
    },
    {
      shape: "Kidney",
      type: "In-ground"
    }
  ]


filteredData = (lowerCasedFilter) => data.filter(item => {
  return Object.keys(item).some(key =>
    item[key].toLowerCase().split(' ').some(word => word.slice(0, lowerCasedFilter.length) === lowerCasedFilter)
  );
});

console.log( filteredData('round') )