When the search is triggered, I want to filter the images by name. However, the issue arises when trying to make everything disappear on filter addition.
<ul id="list2">
<li class="in2">
An extra number is added to the result in some cases - for example, if there are 8 images, it shows 9. When searching for something with 2 results, it displays 3 instead. How can I subtract 1 from the search result?
Here's my code:
<ul id="list2">
<div class="chartGap">
<li class="in2">
<button class="customAccordion chartBackGroundColor">
<p class="chartTitle">Limestone</p>
<p class="chartViewAll">View All
<span class="list-count2"></span>
<svg class="chartIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
class="bi bi-arrow-down-short" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z" />
</svg>
</p>
</button>
<div class="panel">
<main class="chartMain">
<div class="chartContainer">
<li class="in2"> <div class="card">
<div class="card-image">
<a loading="eager"
href="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/OMNIAR_BEIGE_-_ROULLATO_-_LIMESTONE_result.jpg?v=1669391209"
data-fancybox="gallery-omniar-beige-roullato-limestone" data-caption="OMNIAR BEIGE ROULLATO LIMESTONE">
<img
src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/OMNIAR_BEIGE_-_ROULLATO_-_LIMESTONE_result.jpg?v=1669391209"
alt="OMNIAR BEIGE ROULLATO LIMESTONE">
</a>
</div>
<h1 class="galleryCustomH">OMNIAR BEIGE <br> ROULLATO <br> LIMESTONE</h1>
</div> </li>
<li class="in2"> <div class="card">
<div class="card-image">
<a loading="eager"
href="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/OMNIAR_BEIGE_-_HONED_-_LIMESTONE_result.jpg?v=1669391209"
data-fancybox="gallery-omniar-beige-honed-limestone" data-caption="OMNIAR BEIGE HONED LIMESTONE">
<img
src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/OMNIAR_BEIGE_-_HONED_-_LIMESTONE_result.jpg?v=1669391209"
alt="OMNIAR BEIGE HONED LIMESTONE">
</a>
</div>
<h1 class="galleryCustomH">OMNIAR BEIGE <br> HONED <br> LIMESTONE</h1>
</div> </li>
...
</div>
</main>
</div>
</div>
</li>
</ul>
<script>
$(document).ready(function() {
var jobCount = $('#list2 .in2').length;
$('.list-count2').text(jobCount + ' items');
$("#search-text").keyup(function () {
//$(this).addClass('hidden');
var searchTerm = $("#search-text").val();
var listItem = $('#list2').children('li');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
//extends :contains to be case insensitive
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$("#list2 li").not(":containsi('" + searchSplit + "')").each(function(e) {
$(this).addClass('hiding out').removeClass('in2');
setTimeout(function() {
$('.out').addClass('hidden');
}, 300);
});
$("#list2 li:containsi('" + searchSplit + "')").each(function(e) {
$(this).removeClass('hidden out').addClass('in2');
setTimeout(function() {
$('.in2').removeClass('hiding');
}, 1);
});
var jobCount = $('#list2 .in2').length;
$('.list-count2').text(jobCount + ' items');
//shows empty state text when no jobs found
if(jobCount == '0') {
$('#list2').addClass('empty');
}
else {
$('#list2').removeClass('empty');
}
});
});
</script>