Is it possible to search through hidden items (I used CSS display: none; property) using JS? I want to show only the first 50 items from my array (the rest is visible if the user clicks the "Show all" button). In addition to this, I want to enable the user to search through the all items from that list using the search bar I created. So far, I managed to limit the number of items shown, and create a search bar and search function. However, my search function only finds the results from the visible 50 items. How can I create a function that will show items from the hidden specter of my array if there are any matches?
Relevant JS code:
function filter_shown(el) {
var filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = el.value.toUpperCase();
ul = el.parentElement.nextElementSibling
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
Relevant PHP + CSS code:
<?php
foreach ($items as $item){
if ($i++ == 50){ ?>
<style>
li{display:none;}
li:nth-child(-n+50){display:list-item;}
</style>
<?php } ?>
<li> <?php echo $item?> </li>
<?php } ?>
