我在正文中有一個帶有輸入和按鈕元素的 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);
};
uj5u.com熱心網友回復：
比較時需要將專案的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>uj5u.com熱心網友回復：
你的意思是這樣的嗎？
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/417450.html
標籤：
上一篇：如何撰寫一個將字串陣列作為引數并列印出每個元素的第一個字母的函式（每行一個）
下一篇：從父函式獲取映射子組件的鍵