如何过滤搜索结果？

Question

我有以下代码来显示来自.json 文件的数据，我也有从 first_name 字段搜索数据的搜索文本框，但我想从 first_name、last_name 和 Department 搜索，我也想使用按钮过滤搜索结果。

当点击first_name按钮时，隐藏last_name和department的搜索结果，或者搜索将仅基于名字，当department按钮点击显示基于部门的结果时相同......

我有代码here

Answer 1

如果要使用所有属性进行过滤，请添加更多条件以使用多个属性进行过滤

filter.(item => (item.last_name === text) || (item.first_name === text) || (item.department === text));

要根据按钮单击过滤键，请添加一个新变量到状态，然后在按钮单击时将该值设置为您想要过滤的任何值。

state : { filterKey: 'all' }

在按钮单击时将值更新为您的过滤器值。

this.setState({ filterKey: 'last_name'});

更新onSearchTextChange 以使用多个属性进行搜索。

onSearchTextChange = searchText => {

  if (this.state.filterKey && this.state.filterKey !== "all") {

    this.setState({
      filteredData: this.state.data.filter(
        item =>
          typeof item[this.state.filterKey] === "string" &&
          item[this.state.filterKey]
            .toLowerCase()
            .includes(searchText.toLowerCase())
      ),
      searchValue: searchText
    });

    return;
  }

  const newData = this.state.data.filter(
    item =>
      (typeof item.first_name === "string" &&
        item.first_name.toLowerCase().includes(searchText.toLowerCase())) ||
      (typeof item.last_name === "string" &&
        item.last_name.toLowerCase().includes(searchText.toLowerCase())) ||
      (typeof item.Department === "string" &&
        item.Department.toLowerCase().includes(searchText.toLowerCase())) ||
      (typeof item.Supervisor === "string" &&
        item.Supervisor.toLowerCase().includes(searchText.toLowerCase()))
  );

  this.setState({
    filteredData: newData,
    searchValue: searchText
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script>

const data = [
  {
    id: "1001",
    first_name: "Alez",
    last_name: "Dara",
    Department: "IT",
    Supervisor: "Supervisor A"
  },
  {
    id: "1002",
    first_name: "Baro",
    last_name: "bara",
    Department: "Accounting",
    Supervisor: "Supervisor A"
  },
  {
    id: "1003",
    first_name: "Tata",
    last_name: "uara",
    Department: "IT",
    Supervisor: "Supervisor A"
  },
  {
    id: "1004",
    first_name: "test 4",
    last_name: "Mara",
    Department: "Sales",
    Supervisor: "Supervisor C"
  },
  {
    id: "1005",
    first_name: "alex",
    last_name: "gara",
    Department: "Sales",
    Supervisor: "Supervisor C"
  },
  {
    id: "1006",
    first_name: "ki",
    last_name: "tara",
    Department: "IT",
    Supervisor: "Supervisor A"
  }
];
  
</script>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: data,
      filteredData: data,
      filterKey: "all",
      searchValue: ""
    };
  }

  changeFilter = filterKey => {
    this.setState(
      {
        filterKey: filterKey
      },
      () => this.onSearchTextChange(this.state.searchValue)
    );
  };

  onSearchTextChange = searchText => {
    if (this.state.filterKey && this.state.filterKey !== "all") {
      this.setState({
        filteredData: this.state.data.filter(
          item =>
            typeof item[this.state.filterKey] === "string" &&
            item[this.state.filterKey]
              .toLowerCase()
              .includes(searchText.toLowerCase())
        ),
        searchValue: searchText
      });

      return;
    }

    const newData = this.state.data.filter(
      item =>
        (typeof item.first_name === "string" &&
          item.first_name.toLowerCase().includes(searchText.toLowerCase())) ||
        (typeof item.last_name === "string" &&
          item.last_name.toLowerCase().includes(searchText.toLowerCase())) ||
        (typeof item.Department === "string" &&
          item.Department.toLowerCase().includes(searchText.toLowerCase())) ||
        (typeof item.Supervisor === "string" &&
          item.Supervisor.toLowerCase().includes(searchText.toLowerCase()))
    );

    this.setState({
      filteredData: newData,
      searchValue: searchText
    });
  };

  render() {
    return (
      <div>
        <div className="menubar">
          <button onClick={() => this.changeFilter("all")}>All</button>
          <button onClick={() => this.changeFilter("last_name")}>
            Last Name
          </button>
          <button onClick={() => this.changeFilter("Department")}>
            Department
          </button>
        </div>
        {this.state.filteredData.map((person, i) => (
          <div className="profilecard" key={i}>
            <div className="profilecontent">
              <ul>
                <li>
                  <strong>First Name:</strong> {person.first_name}
                </li>
                <li>
                  <strong>Last Name:</strong> {person.last_name}
                </li>
                <li>
                  <strong>Department:</strong> {person.Department}
                </li>
                <li>
                  <strong>Supervisor:</strong> {person.Supervisor}
                </li>
              </ul>
            </div>
          </div>
        ))}

        <input
          placeholder={`search ${this.state.filterKey}`}
          onChange={e => this.onSearchTextChange(e.target.value)}
          value={this.state.searchValue}
        />
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>