如何筛选一个数组并返回该数组中与用户输入匹配的值

Question

我有一个HTML文件，里面有一个输入和一个按钮元素，看起来像这样：

<input type="text" name="searchBar" id="searchBar">
<button onclick="returnText()">Submit</button>

请注意，单击该按钮时将执行"returnText(("函数。

此外，我的HTML文件链接到一个JavaScript文件，该文件包含以下数组：

const myData = [
{
name: "John Miller",
age: 33,
location: "Chicago"
},
{
name: "Jane Doe",
age: 78,
location: "Lansing"
},
{
name: "Jamie Stevens",
age: 21,
location: "San Diego"
}
]

现在，我尝试接受用户输入，找到与数组中某个对象中的任何字符串或数字匹配的任何字符串和数字，并将其显示给用户。我一直在想如何将用户输入与数组中的数据相匹配。我可以分别做每一件，但似乎无法把它们放在一起。

我得到的最接近的是下面的东西。但这只返回一个空数组。

function returnText() {
let input = document.getElementById('searchBar').value.toLowerCase();
let filteredNames = myData.filter(e => e.name === input);
console.log(filteredNames);
};

Answer 1

进行比较时，需要将项的name属性值转换为小写。

const myData=[{name:"John Miller",age:33,location:"Chicago"},{name:"Jane Doe",age:78,location:"Lansing"},{name:"Jamie Stevens",age:21,location:"San Diego"}];
function returnText() {
let input = document.getElementById('searchBar').value.toLowerCase();
let filteredNames = myData.filter(e => e.name.toLowerCase() === input);
console.log(filteredNames);
};

<input type="text" name="searchBar" id="searchBar" value="John Miller">
<button onclick="returnText()">Submit</button>

如果要检查每个属性，可以使用Object.values获取对象的属性值，并检查其中一个值是否等于输入。与检查硬编码属性相比，此解决方案的好处是，如果您选择添加额外的属性，它仍然可以正常工作。

const myData=[{name:"John Miller",age:33,location:"Chicago"},{name:"Jane Doe",age:78,location:"Lansing"},{name:"Jamie Stevens",age:21,location:"San Diego"}];
function returnText() {
let input = document.getElementById('searchBar').value.toLowerCase();
let filteredNames = myData.filter(e => Object.values(e).map(e => String(e).toLowerCase()).some(e => e.includes(input)));
console.log(filteredNames);
};

<input type="text" name="searchBar" id="searchBar" value="Miller">
<button onclick="returnText()">Submit</button>

Answer 2

你的意思是这样的吗？

const myData = [{name:"John Miller",age:33,location:"Chicago"},{name:"Jane Doe",age:78,location:"Lansing"},{name:"Jamie Stevens",age:21,location:"San Diego"}];
function returnText() {
let input = document.getElementById('searchBar').value.toLowerCase();
let filteredNames = myData.filter((e) => {
return Object.values(e).some((value) => {
return value.toString().toLowerCase().includes(input);
});
});
console.log(filteredNames);
};

<input type="text" name="searchBar" id="searchBar" value="John Miller">
<button onclick="returnText()">Submit</button>