Question

In the code below, friendBlocks has 800+ items that look like this:

<div class='block'>
    <span class='title'>Some Name</span>
    <img src='some.img' />
</div>

And I’m trying to filter them with the below code. It works, but is extremely slow and sometimes crashes the browser.

friendBlocks = friendform.find('.block');
filterFriends = function(text) {
    friendBlocks.each(function() {
        var block;
        block = $(this);
        if (block.children('.title').text().toLowerCase().indexOf(text) >= 0) {
            block.show();
        } else {
            block.hide();
        }
    });
};

Is there some way to optimize this and do the search more efficiently?

Answer 1

Do not apply the manipulation on each item in real-time! Clone the node, that contains the block divs, perform the operation, and then replace the original DOM.

Something like (not tested, just example):

friendform   = $('#container').clone();
friendBlocks = friendform.find('.block');
filterFriends = function(text) {
    friendBlocks.each(function() {
        var block;
        block = $(this);
        if (block.children('.title').text().toLowerCase().indexOf(text) >= 0) {
            block.show();
        } else {
            block.hide();
        }
    });
};
$('#container').replaceWith(friendform);