I am trying to create some kind of recipe book for my homework. I have done almost everything other than the function that lets you search by ingredients. This is what I've tried, it doesn't work and always has a "false" value. Is there another way to make the search function without the includes() function that is easier than this? If not, what exactly am I doing wrong?
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>
question from:
https://stackoverflow.com/questions/65860526/how-to-search-for-an-object-inside-of-an-array-which-is-inside-of-another-array 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
