如何过滤数组和 return 该数组中与用户输入匹配的值？

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"
}
]

现在，我正在尝试获取用户输入并找到与我的数组中的一个对象中的任何字符串或数字相匹配的任何字符串或数字，并将其显示回用户。我一直在试图弄清楚如何将用户输入与我的数组中的数据相匹配。我可以单独完成这些部分，但似乎无法将它们放在一起。

我得到的最接近的是下面的内容。但这只是returns一个空数组。

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>

如何过滤数组和 return 该数组中与用户输入匹配的值？

How do I filter through an array and return the values in that array that match a user input?

javascript

arrays

javascript-objects

user-input