[英]ReactJS Search input by multiple values
I have a search and select filters on my page. 我进行搜索,然后在页面上选择过滤器。 The issue that I am having is that I can't seem to make the search work with multiple json values.
我遇到的问题是我似乎无法使用多个json值进行搜索。
Example value is { "id": "1", "role": "teacher", "subject": "mathematics", "name": "Jonathan Kovinski" }
and I want to be able to use key and values. 值的示例是
{ "id": "1", "role": "teacher", "subject": "mathematics", "name": "Jonathan Kovinski" }
并且我希望能够使用键和值。
I've tried using some other question about combining json key and value into a single array and passing it to the search filter but it didn't work. 我试过使用其他有关将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);
});
Here is a link to a JS Fiddle that I've created with all of my code. 这是我用所有代码创建的JS小提琴的链接。
I am trying to set my search bar to use all keys and values for searching and sorting data.
我试图将搜索栏设置为使用所有键和值来搜索和排序数据。
i would suggest you put the filtered
data in a seperate key in the state in case you want to revert to the original result, use the Obeject.values
instead of Object.keys
and filter the data
in the handleChange
function, 我建议您将
filtered
数据置于状态下的单独键中,以防您想恢复到原始结果,请使用Obeject.values
而不是Object.keys
并在handleChange
函数中过滤data
,
here's a working code : 这是一个工作代码 :
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"));
Actually, I read all of your code in Fiddle, But I proffer Fuse to you. 实际上,我在Fiddle中阅读了您的所有代码,但向您提供了Fuse 。 Use it inside your code in
componentDidMount
and implement your search. 在
componentDidMount
的代码中使用它并实现搜索。 it is very easy and handy. 这是非常容易和方便的。
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
The result
is your answer. result
就是您的答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.