CODEWITHSUNDEEP
javascriptjquery
PKD
PKD

Reputation: 707

Reset button for JQuery table row filter

I have a table on my page, and a filtering text box above it that works fantastic, using the following JQuery:

        $("#searchInputCompanies").keyup(function () {
            //split the current value of searchInput
            var data = this.value.split(" ");
            //create a jquery object of the rows
            var jo = $("#cBody").find("tr");
            if (this.value == "") {
                jo.show();
                return;
            }
            //hide all the rows
            jo.hide();

            //Recusively filter the jquery object to get results.
            jo.filter(function(i, v) {
                var $t = $(this);
                for (var d = 0; d < data.length; ++d) {
                    if ($t.text().toLowerCase().indexOf(data[d].toLowerCase()) > -1) {
                        return true;
                    }
                }
                return false;
            })
            //show the rows that match.
            .show();

            $('#selectAllCompanies').prop('checked', '');
        }).focus(function () {
            this.value = "";
            $(this).css({
                "color": "black"
            });
            $(this).unbind('focus');
        }).css({
            "color": "#C0C0C0"
        });

How can I set up a Reset Filter button for this?

Upvotes: 0

Views: 1336

Answers (1)

Starmetal
Starmetal

Reputation: 760

Uhh, this is quite a bad implementation :( First, you need to change the event for $("#searchInputCompanies") to make it all a bit easier. So, it will become $("#searchInputCompanies").on("input", function() {...

$("#resetAction").on("whatEventYouWant", function() {
  $("#searchInputCompanies").val("").trigger("input");
});

This will trigger input event on $("#searchInputCompanies") and because the text box is empty all rows will become visible.

Upvotes: 1

Related Questions