Using jQuery, I have implemented a search functionality that hides items in a list that do not match a given string. The code loops through a list of divs and utilizes $(this).fadeOut(); to hide the elements.
While this functionality works effectively, I am looking to enhance it by enabling multiple searches within the same list. I have added an additional search field, but it does not carry over the previous fade outs and initiates the search from the beginning each time.
I am seeking a method to instruct the searches to only target visible elements in the list. This should also be able to handle cases where users input text in the second search field before the first.
For reference, here is a JSFiddle showcasing the issue:
Additionally, here is a snippet of one of the search functions:
$("#filter").keyup(function () {
var filter = $(this).val(),
count = 0;
$(".records2 div").each(function () {
// If the list item does not contain the text phrase, fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increment the count by 1
} else {
$(this).show();
count++;
}
});
});