我正在尝试仅使用一个文本输入在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>
);
}
我想要的是能够组合属性。例如:我希望能够输入“意大利最适合......的地方”并仍然得到结果。我不想仅限于只能输入“披萨最佳地点”或“意大利”来获取条目。
最佳答案
您可以让搜索执行如下操作:
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在其中进行搜索。
关于javascript - 仅使用一个输入(即全局搜索)搜索对象中的多个属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56134862/