如何解决如何在另一个数组内的数组内搜索对象？
我正在尝试为我的家庭作业制作某种食谱书。除了让您按成分搜索的功能之外，我几乎完成了所有工作。这是我尝试过的，它不起作用并且总是有一个“假”值。是否有另一种方法可以使搜索功能没有比这更容易的 includes() 函数？如果没有，我到底做错了什么？
M.AutoInit();
let recepies = document.getElementById("recepti")
let ingr = []
document.getElementById("submit").addEventListener("click",(event) => {
event.preventDefault()
recepies.innerHTML += `<div class="row">
<div class="col s12">
<div class="card-panel blue-grey lighten-5">
<blockquote style="border-color: teal;">
<div class="card-title teal-text text-darken-3" style="font-size:xx-large;"> ${document.getElementById("icon_prefix").value}
</div> <br>
<div>${document.getElementById("meal").value}</div> <br>
<div class="card-title teal-text text-darken-3">Sastojci</div>
<p class="text-darken-4" name="recepie">${document.getElementById("textarea1").value}</p>
<div class="card-title teal-text text-darken-3">Recept</div>
<p class="text-darken-4">${document.getElementById("textarea2").value}</p>
</div>
</blockquote>
</div>
</div>`
let ingrInner = []
ingrInner.push(document.getElementById("textarea1").value.split(","))
ingr.push(ingrInner)
console.log(ingr)
})
let search = document.getElementById("search")
function Search() {
for (let i = 0; i < ingr.length; i++) {
if (ingr[i].includes(search.value) === true) {
console.log("yes")
} else {
console.log("no")
}
}
}
search.addEventListener("keyup",Search)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<!-- Google Material Icons import -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body>
<div>
<nav>
<div class="nav-wrapper" style="background-color: teal;">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<div class="row">
<form class="col s12 m6 l4">
<div class="row">
<div class="input-field col s12 m10 l8">
<i class="tiny material-icons prefix">title</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Recipe Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m10 l8">
<i class="tiny material-icons prefix">dehaze</i>
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Ingredients (separate by comma)</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m10 l8">
<i class="tiny material-icons prefix">create</i>
<textarea id="textarea2" class="materialize-textarea" name="recepie"></textarea>
<label for="textarea1">Recipe</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m10 l8">
<i class="tiny material-icons prefix">format_list_numbered</i>
<select>
<option value="" disabled selected id="meal">
Choose a meal of the day
</option>
<option value="Breakfast">Breakfast</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
<option value="Snack">Snack</option>
</select>
</div>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action" id="submit">
Submit
<i class="material-icons right">send</i>
</button>
</form>
<div class="container col s12 m6 l8" id="recepti">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="index.js"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
