I'm in need of getting a working search bar for these cards (only one included in the code to save space), the js I've been using worked fine for now, but recently I had to add a new div (with class sce-all) which made it search only some of the items or actually too many from different divs and makes the other info into display:none when I search for anything from div (with class sce-e). When I try to search anything right now, it also searches from div (with class sce-e), I only need it to search from div (with class sce-tt) or it could be both, but it gives it the display:none tag currently. I tried changing up the ('.card div:nth-child(2)') in the js which is the cause of the problem it seems. Thanks for any help
const searchEl = document.querySelector('.searchbox');
const x = document.querySelectorAll('.card div:nth-child(2)');
function search(e) {
x.forEach((item, index) => {
if (!item.innerHTML.toLowerCase().includes(e.target.value)) {
item.parentElement.style.display = 'none';
} else {
item.parentElement.style.display = 'block';
}
})
}
searchEl.addEventListener("keyup", search);<form class='searchbox'>
<input class="searchbar" type="text" placeholder="Search.." name="search">
</form>
<div class="main-container">
<div class="cards-vid">
<div class="video anim card">
<div class="video-wrapper">
<div class="video-wrapper-inside">
<a href="vid.mp4"><video preload="metadata">
<source src="vid.mp4#t=139" type="video/mp4">
</video></a>
</div>
</div>
<div class="sce-all">
<div class="sce-e"><a href="none">Link Title</a><span class="length-t">0ms</span></div>
<div class="sce-tt">Title</div>
</div>
<div class="tags-and-info">
<div class="tags"><a><span class="category-tag">Main</span></a><span class="language-edit"><a href="vid.mp4">ENG</a></span></div>
<hr class="sce-hr">
<div class="sce-inf">Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span>2023</div>
</div>
</div>
</div>
</div>Change x to just select the .sce-tt divs. Then when it decides whether to hide or show the parent, use closest('.card') to find the containing card, rather than specifying .parent.
const searchEl = document.querySelector('.searchbox');
const x = document.querySelectorAll('.card .sce-tt');
function search(e) {
x.forEach((item, index) => {
if (!item.innerHTML.toLowerCase().includes(e.target.value)) {
item.closest(".card").style.display = 'none';
} else {
item.closest(".card").style.display = 'block';
}
})
}
searchEl.addEventListener("keyup", search);<form class='searchbox'>
<input class="searchbar" type="text" placeholder="Search.." name="search">
</form>
<div class="main-container">
<div class="cards-vid">
<div class="video anim card">
<div class="video-wrapper">
<div class="video-wrapper-inside">
<a href="vid.mp4"><video preload="metadata">
<source src="vid.mp4#t=139" type="video/mp4">
</video></a>
</div>
</div>
<div class="sce-all">
<div class="sce-e"><a href="none">Link Title</a><span class="length-t">0ms</span></div>
<div class="sce-tt">Title</div>
</div>
<div class="tags-and-info">
<div class="tags"><a><span class="category-tag">Main</span></a><span class="language-edit"><a href="vid.mp4">ENG</a></span></div>
<hr class="sce-hr">
<div class="sce-inf">Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span>2023</div>
</div>
</div>
</div>
</div>You can use closest(), with this you can have any element as children looping because it will lookup the closest parent with class/Id (in this case .card) you put as parameter, and as I said in my comment to your question you could use const x = document.querySelectorAll('.sce-tt') or const x = document.querySelectorAll('.sce-all')
const searchEl = document.querySelector(".searchbox");
const x = document.querySelectorAll(".sce-tt");
function search(e) {
x.forEach(
item =>
(item.closest(".card").style.display = !item.innerHTML
.toLowerCase()
.includes(e.target.value) ?
"none" :
"block")
);
}
searchEl.addEventListener("keyup", search);<form class="searchbox">
<input class="searchbar" type="text" placeholder="Search.." name="search" />
</form>
<div class="main-container">
<div class="cards-vid">
<div class="video anim card">
<div class="video-wrapper">
</div>
<div class="sce-all">
<div class="sce-e">
<a href="none">Link Title</a><span class="length-t">0ms</span>
</div>
<div class="sce-tt">Title</div>
</div>
<div class="tags-and-info">
<div class="tags">
<a><span class="category-tag">Main</span></a
><span class="language-edit"><a href="vid.mp4">ENG</a></span>
</div>
<hr class="sce-hr" />
<div class="sce-inf">
Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span
>2023
</div>
</div>
</div>
<div class="video anim card">
<div class="video-wrapper">
</div>
<div class="sce-all">
<div class="sce-e">
<a href="none">Link test</a><span class="length-t">0ms</span>
</div>
<div class="sce-tt">test</div>
</div>
<div class="tags-and-info">
<div class="tags">
<a><span class="category-tag">Main</span></a
><span class="language-edit"><a href="vid.mp4">ENG</a></span>
</div>
<hr class="sce-hr" />
<div class="sce-inf">
Info<span class="seperate video-seperate"></span>0h 46m<span class="seperate video-seperate"></span
>2023
</div>
</div>
</div>
</div>
</div>