الكود لديك غير صحيح، فأنت تقوم بإخفاء العنصر الأب parentNode الذي يحوي عناصر المنتجات، وبالتالي عند البحث عن منتج سيتم إخفاء كامل العنصر بالمنتجات التي بداخله.
لذا الكود الصحيح هو:
كود HTML:
<header class="header-sec"> <header class="search-box"> <div class="search-container pro-name">Product 1 Name</div> <div class="search-container pro-name">Product 2 Name</div> <div class="search-container pro-name">Product 3 Name</div> <input class="inputBox" type="text" placeholder="Search Products"> </header> </header>
كود JS:
searchConProductsNames = document.querySelectorAll(".pro-name");
const inputBox = document.querySelector('.inputBox')
inputBox.addEventListener('input', () => {
let userInput = document.querySelector(".inputBox").value;
console.log(userInput)
searchConProductsNames.forEach(element => {
if (element.innerHTML.includes(userInput)) {
element.style.display = "block !important";
} else {
element.style.display = "none";
}
});
});
لكن ستظهر لك مشكلة وهي أنه عند حذف حرف من اسم المنتج من المفترض أن يتم البحث من جديد وعرض المنتجات التي بها جزء متشابه من الاسم، حاول حل تلك المشكلة وكبداية ستقوم بتعديل حدث input لحدث آخر.
التعليقات