Question

我正在尝试仅使用一个文本输入在reactjs中构建对象的通用/全局搜索。

我尝试了不同的方法，包括将字符串转换为数组，然后使用它来筛选对象。我设法通过所有属性进行输入搜索，但一次只能搜索一个。

const data = [
  {
    name:"Italy",
    title:"Best place for Pizza"
  },
  {
    name:"USA",
    title:"It is a federal state"
  }
]
export class MyApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      filteredData:[],
      filter:''
    }
    this.handleSearch.bind(this);
  }
  componentDidMount(){
    this.setState({
      filteredData:data
    })
  }

  handleSearch = (e) =>{
    const filter = e.target.value;

    this.setState({
      filter
    })
  }
  render(){
    var filteredData = data;
    var searchValue = this.state.filter;
    filteredData = filteredData.filter(country => {
      return['name', 'title'].some(key =>{
        return country[key].toString().toLowerCase().includes(searchValue)
      })
    })

    return (
      <div>
        <input type="search" onChange={(e) => this.handleSearch(e)}/>
        {
          filteredData.map(result =>{
              return <p>{result.name} | {result.title}</p>
          })
        }
      </div>
    );
  }

我想要的是能够组合属性。例如：我希望能够输入“ ...的意大利最佳去处”并仍然得到结果。我不希望只键入“披萨最佳去处”或“意大利”来获得该条目。

Answer 1

我不确定这是否是最佳实践，但是当遇到类似问题时，我只是一直将.filter()函数彼此链接，每个过滤器都在搜索不同的属性。

filteredData = filteredData.filter(country => {
    return country['name'].toString().toLowerCase().includes(searchValue)
      }).filter(country => {
    return country['title'].toString().toLowerCase().includes(searchValue)
    })

它可以工作，但看起来不那么漂亮。

Answer 2

您可以使搜索执行以下操作：

const data = [ { name:"Italy", title:"Best place for Pizza" }, { name:"USA", title:"It is a federal state" } ]

let search = (arr, str) => {
 return arr.filter(x => Object.values(x)
  .join(' ')
  .toLowerCase()
  .includes(str.toLowerCase()))
}

console.log(search(data, 'Italy best'))
console.log(search(data, 'USA it is'))

想法是使用Array.filter并在内部获取对象的值（使用Object.values）（这里我们假设它们都是字符串），并将它们组合（通过Array.join）到一弦。然后使用Array.includes在其中进行搜索。

仅使用一个输入（即全局搜索）在对象中搜索多个属性

2 个答案: