ReactJS通過多個值搜索輸入

Question

我進行搜索，然后在頁面上選擇過濾器。 我遇到的問題是我似乎無法使用多個json值進行搜索。

值的示例是{ "id": "1", "role": "teacher", "subject": "mathematics", "name": "Jonathan Kovinski" }並且我希望能夠使用鍵和值。

我試過使用其他有關將JSON 鍵和值組合到單個數組中並將其傳遞到搜索過濾器的問題，但是它不起作用。

text = data.filter(info => {
  return Object.keys(info).map(function(key) {
    var singleOne = JSON.stringify(info[key]);
    console.log(info, "This is the json one")
  }).toLowerCase().match(searchString);
});

這是我用所有代碼創建的JS小提琴的鏈接。

我試圖將搜索欄設置為使用所有鍵和值來搜索和排序數據。

Answer 1

我建議您將filtered數據置於狀態下的單獨鍵中，以防您想恢復到原始結果，請使用Obeject.values而不是Object.keys並在handleChange函數中過濾data ，

這是一個工作代碼 ：

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      data: [],
      searchString: "",
      filtered: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  handleChange(e) {
    var value = e.target.value;
    this.setState({
      searchString: value,
      filtered: this.state.data.filter(e =>
        Object.values(e)
          .join(" ")
          .toLowerCase()
          .match(value)
      )
    });
  }

  fetchData() {
    fetch("https://api.myjson.com/bins/lo3ls")
      .then(response => response.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          data: json,
          filtered: json
        });
      })
      .catch(error => console.log("parsing failed", error));
  }

  render() {
    var { isLoaded, data } = this.state;
    const searchString = this.state.searchString.trim().toLowerCase();
    let text = this.state.data;
    console.log(text);
    if (searchString.length > 0) {
      text = text.filter(info => {
        return info.role.toLowerCase().match(searchString);
      });
    }
    return (
      <div>
        <input
          type="text"
          id="searchbar"
          value={this.state.searchString}
          onChange={this.handleChange}
          placeholder="Search"
          name="device"
        />

        <select className="category-select" name="categories" onChange={this.handleChange}>
          {data.map(info => (
            <option value={info.role}>{info.role}</option>
          ))}
        </select>
        {/* map through the filtered ones*/}
        {this.state.filtered.map(info => (
          <div className="display">
            <span className="role">Role: {info.role}</span>
            <span> Name: {info.name}</span>
            <span>, Subject: {info.subject}</span>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Hello name="World" />, document.getElementById("container"));

Answer 2

實際上，我在Fiddle中閱讀了您的所有代碼，但向您提供了Fuse 。 在componentDidMount的代碼中使用它並實現搜索。 這是非常容易和方便的。

const options = {
  shouldSort: true,
  threshold: 0.6,
  location: 0,
  distance: 100,
  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: [
    "title",
    "author.firstName"
  ]
};

const fuse = new Fuse(list, options); // "list" is the item array
const result = fuse.search(""); // put your string inside double quotation

result就是您的答案。