let search_field = document.querySelector(".search-field input"); let all_friends = document.querySelectorAll(".chat .profile-name"); search_field.onchange = function() { let search_value = search_field.value.toLowerCase(); let sp_search_value = search_value.split(""); for (let i = 0; i < all_friends.length; i++) { for (let y = 0; y < sp_search_value.length; y++) { // Why it doesn't Enter to this condition even if field is empty?, // But if I make it outside the nested loop it works!? if (search_value == "") { console.log("Empty"); } // To search even if user did'nt enter the full name else if (sp_search_value[y] == all_friends[i].textContent[y].toLowerCase()) { // Show chats if the field is empty or if exisits after remove them all all_friends[i].parentElement.parentElement.parentElement.classList.remove("disabled"); } // Disabled if not exists else if (search_value != all_friends[i].textContent.toLowerCase()) { let grandEle = all_friends[i].parentElement.parentElement.parentElement; grandEle.classList.add("disabled"); } } } }El problema es que si lo hago fuera del bucle anidado, ¿funciona? el problema en el bucle anidado, pero ¿qué es?
Aquí hay una versión un poco más corta que demuestra cómo se puede hacer con Array.prototype.every() :
let search_field = document.querySelector(".search-field input"); let all_friends = document.querySelectorAll(".chat .profile-name"); search_field.oninput = function() { let search_value = search_field.value.toLowerCase(); let sp_search_value = search_value.split(" "); all_friends.forEach((f,i)=>{ f.parentNode.parentNode.parentNode.style.display= sp_search_value.every(v=>f.textContent.indexOf(v)>-1) ? "" : "none" }) } <div class="search-field"> <input type="text"> </div> <div class="chat"> <div>an unaffected header</div> <div class="profile-top">1<div><div><div class="profile-name">apple orange banana</div></div></div></div> <div class="profile-top">2<div><div><div class="profile-name">grapefruit blueberry pear</div></div></div></div> <div class="profile-top">3<div><div><div class="profile-name">raisin date</div></div></div></div> <div class="profile-top">4<div><div><div class="profile-name">pear apple</div></div></div></div> <div class="profile-top">5<div><div><div class="profile-name">orange satsuma lemon</div></div></div></div> <div>and an unaffected footer</div> </div> Actualmente, mi modo de comparación es un poco más relajado que el suyo: mostrará perfiles tan pronto como sus .textContent s contengan las palabras de búsqueda ingresadas como fragmentos. Por supuesto, esto se puede cambiar a algo más estricto si es necesario.
Subir en la jerarquía DOM usando .parentNode.parentNode.parentNode no es una buena idea, ya que podría romperse fácilmente tan pronto como cambie la estructura de su marcado. Algo como .closest(".profile-top") sería más estable. Pero esto requiere un cambio de HTML (ver mi ejemplo anterior).