Question

I have a table containing in every row one cell inside which is checkbox and label for that checkbox.

What I’m trying to do it to hide rows based on inputed text.

Basically this is list on names and I want to filter/hide those that don’t contain entered text.

This is my function:

$(function () {
$('#user_name').keyup(function () {
    if ($.trim($('input#user_name').val()) == '') {
        $('table.myList >tbody >tr').each(function (index, value) {
            $(this).css("display", "block");
        });
    } else {
        $('table.myList >tbody >tr').each(function (index, value) {
            if ($(this).find('td > label').length > 0) {
                if ($(this).find('td > label').html().toLowerCase().indexOf($.trim($('input#user_name').val()).toLowerCase()) >= 0) {
                    $(this).css("display", "block");
                } else {
                    $(this).css("display", "none");
                }
            }
        });
    }
});
});

This code works, if my table has 40 records its fast, but when I increment list to 500 it slows down and crashes my browser after time.

I’m looking for a way to improve this code to work faster.

Here is link to mock-up code: http://jsfiddle.net/gGxcS/

==UPDATE==

Here is my final solution based on answers of @scessor and @nnnnnn:

$(function () {

var $tableRows = $('table.myList tr');
var lastInput = '';

$('#user_name').keyup(function () {
    var sValue = $.trim($('input#user_name').val());
    if(lastInput==sValue) return;
    if (sValue == '') {
        $tableRows.show();
    } else {
        $tableRows.each(function () {
            var oLabel = $(this).find('label');
            if (oLabel.length > 0) {
                if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            }
        });
        lastInput=sValue;
    }
});

$('img.removeSelections').click(function () {
    $('table.myList input[type="checkbox"]').prop("checked", false);
})
});

Answer 1

Can you test this code (with lot of elements)?

$(function () {
    $('#user_name').keyup(function () {
        var sValue = $.trim($('input#user_name').val());
        if (sValue == '') {
            $('table.myList tr').show();
        } else {
            $('table.myList tr').each(function() {
                var jThis = $(this);
                var oLabel = jThis.find('label');
                if (oLabel.length > 0) {
                    if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
                        jThis.show();
                    } else {
                        jThis.hide();
                    }
                }
            });
        }
    });
});

• Don’t call functions with same parameters twice (e.g. $.trim($('input#user_name').val());).
• Use short selectors.
• Use jquery each only if necessarry (e.g. don’t needed here: $('table.myList >tbody >tr').each(function (index, value) {).

=== UPDATE ===

If somebody holds backspace to long, it will set all trs visible again and again. To prevent this you could check, if the last value is equal to the current value. If true, do nothing.

=== UPDATE ===

To uncheck all checkboxes, it depends on your jQuery version.

With jQuery 1.6 and higher:
$('table.myList input[type="checkbox"]').prop("checked", false);
Before:
$('table.myList input[type="checkbox"]').attr("checked", false);