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");
}
}
}
}
The problem is if I make it outside the nested loop it works!? the problem in the nested loop but what is it?
Here is a slighty shorter version demonstrating how it can be done with 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>At present my mode of comparison is slightly more relaxed than yours: it will show profiles as soon as their .textContents contain the entered search words as fragments. This can of course be changed to something stricter if required.
Moving up the DOM hierarchy using .parentNode.parentNode.parentNode is not a good idea as it might easily break as soon as you change the structure of your markup. Something like .closest(".profile-top") would be more stable. But this requires a change of the HTML (see my example above).