I've got a jQuery function to search through table rows. Currently I've got about 2000+ rows but it's only going to grow. Even when I click the input tag the browser freezes and then searching through all the rows is just a pain. This is the code I use:
$(".filter-input").each(function() {
var $filter = $(this);
$filter.on("change keydown keyup keypress", function() {
setTimeout(function() {
var $tbodies = $searchtable.find("tbody");
var value = $filter.val();
$tbodies.each(function() {
var $tbody = $(this);
if (filterfunction($tbody, value))
$tbody.show();
else
$tbody.hide();
});
}, 1);
});
});
The .filter-input
is the input tag here.
On my high end PC i don't really face this issue, but the problem is very prevalent on average devices. So my question is how do I optimize this code or even better what is the best way to search through a lot of rows in JS.