0

I have created a table but somehow now able to filter the row. Its giving me error as cannot read property split. Here is the link to my fiddle file. Any help would be great. Thanks in advance.

$("#crudtable_filter").keyup(function () {
    //split the current value of searchInput
    var data = this.value.split(" ");
    //create a jquery object of the rows
    var jo = $("#crudtable").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.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    //show the rows that match.
    .show();
}).focus(function () {
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
}).css({
    "color": "#C0C0C0"
});
J. Vie
  • 113
  • 1
  • 12
Harshit
  • 278
  • 1
  • 5
  • 12

1 Answers1

3

Working fiddle: http://jsfiddle.net/sofqjbrg/3/

Explanation:

In order to get the value of the element that rigger the event, you need to use $(event.target).val().

For the difference between $(event.target) and $(this), please refer to Difference between $(this) and event.target?

PS: Your focus event is registered to the wrong element.

Community
  • 1
  • 1
user3682091
  • 755
  • 1
  • 7
  • 17
  • thanx , worked like charm , but i can only see the specific element which i searched for , what if i want to see the entire row of the selected word? – Harshit Feb 21 '17 at 05:47
  • @Harshit you may want to keep the table header by hiding all tr excpet the first one: `var jo = $("#crudtable").find("tr").not(":eq(0)");`. New JsFiddle: http://jsfiddle.net/sofqjbrg/5/ – user3682091 Feb 21 '17 at 05:54