搜索筛选器不接受一个值"Round" "Ground"因为每个结果中都有一个值

Question

我正在为游泳池制作照片库。搜索栏会更新每个输入字符的状态，类似于 Netflix 搜索栏。它会更新 JSON 文件中的所有键，类似于在 Netflix 上搜索"善意狩猎"作为标题或搜索"马特达蒙"作为演员的方式。

我遇到的问题是"圆形"将是一个常见的搜索词，在 JSON 中触发"形状"："圆形"。但另一类是"类型"："地上"或"类型"："地下"。

因此，如果搜索圆形池，查询不会筛选为仅显示圆形池，因为"圆形"也会触发单词"ground"。它显示了圆形池和任何触发"地上"或"地下"的池子的大杂烩。

我尝试弄乱 .filter 和 .include 方法，但无济于事。我不确定我是否在那里错过了什么还是什么。

我还即将研究正则表达式，以可能指示"如果搜索词"round"没有前置字符，则显示圆形池并忽略地面触发器"。

import React, { Component } from "react";
class App extends Component {
state = {
filter: "",
data: [
{
shape: "Round",
type: "Above-ground"
},
{
shape: "Rectangle",
type: "In-ground"
},
{
shape: "Kidney",
type: "In-ground"
}
]
};
handleChange = event => {
this.setState({
filter: event.target.value
});
};
render() {
const { filter, data } = this.state;
const lowerCasedFilter = filter.toLowerCase();
const filteredData = data.filter(item => {
return Object.keys(item).some(key =>
item[key].toLowerCase().includes(lowerCasedFilter)
);
});
return (
<div>
<input value={filter} onChange={this.handleChange} />
{filteredData.map(item => (
<div>
<p>Shape: {item.shape}</p>
<p>Type: {item.type}</p>
<hr />
</div>
))}
</div>
);
}
}
export default App;

我希望搜索过滤器在用户输入"轮"时只显示"圆形"池，并且不会因"地面"一词而显示多余的结果

Answer 1

您可以使用动态RegExp，该使用单词边界b进行"完整单词"匹配。

const lowerCasedFilter = filter.toLowerCase();
const filteredData = data.filter(item => {
return Object.keys(item).some(key => {
const stringToSearch = item[key].toLowerCase();
const regex = new RegExp("\b"+ lowerCasedFilter +"\b"); // build regex around the given search term ("round" in your case)
return regex.test(stringToSearch); // use "test" to see if your term is present in the property value
});
});

这篇文章中的相关信息：javascript中的整个单词匹配。

Answer 2

查找数据对象的任何字段中是否像 lowerCasedFilter 一样开始一个单词

item[key].toLowerCase().split(' ').some(word => word.slice(0, lowerCasedFilter.length) === lowerCasedFilter)

const data = [
{
shape: "Round",
type: "Above-ground"
},
{
shape: "Rectangle",
type: "In-ground"
},
{
shape: "Kidney",
type: "In-ground"
}
]
filteredData = (lowerCasedFilter) => data.filter(item => {
return Object.keys(item).some(key =>
item[key].toLowerCase().split(' ').some(word => word.slice(0, lowerCasedFilter.length) === lowerCasedFilter)
);
});
console.log( filteredData('round') )

Answer 3

如果它特定于五个字母"round"，你可以使用

const filteredData = lowerCasedFilter === "round" ? 
data.filter(item => item.shape === "Round") : 
data.filter(item => {
return Object.keys(item).some(key =>
item[key].toLowerCase().includes(lowerCasedFilter)
);
});