Filter a table by input value, on key up (simplify

Question

I have a solution already, but it's messy and could use some tweaking. Basically, I have two tables on a page and each table has an input text box for every column with a corresponding filter name. The idea is that while the user is typing above that column, the table is being filtered by each variable. This is where I found my solution, but this is only for one input box, and one table. Also when you clear the input box, the entire table clears. I like that this example isn't case sensitive, but it has a few bugs. http://www.marceble.com/2010/02/simple-jquery-table-row-filter/ Here's a jsfiddle that I put together, yet it isn't filtering as it should. http://jsfiddle.net/anschwem/mAAvW/

Code:

<script>
 $(document).ready(function() {
 //Declare the custom selector 'containsIgnoreCase'.
      $.expr[':'].containsIgnoreCase = function(n,i,m){
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
      };

      $("#searchInput").keyup(function(){

          $("#fbody").find("tr").hide();
          var data = this.value.split(" ");
          var jo = $("#fbody").find("tr");
          $.each(data, function(i, v){

               //Use the new containsIgnoreCase function instead
               jo = jo.filter("*:containsIgnoreCase('"+v+"')");
          });

          jo.show();

      }).focus(function(){
          this.value="";
          $(this).css({"color":"black"});
          $(this).unbind('focus');
      }).css({"color":"#C0C0C0"});
  });
</script>

HTML:

<table>
  <thead>
    <tr>
        <td><input value="Animals"></td>
        <td><input value="Numbers"></td>   
    </tr>
  </thead>
  <tbody>
    <tr><td>cat</td><td>one</td></tr>
    <tr><td>dog</td><td>two</td></tr>
    <tr><td>cat</td><td>three</td></tr>
    <tr><td>moose</td><td>four</td></tr>
    <tr><td>mouse</td><td>five</td></tr>
    <tr><td>dog</td><td>six</td></tr>
  </tbody>
</table>

Answer 1

hmm , here is my solution ... without a regex more of a simple solution using the same stuff you used

as long as you have search boxes have the same class name this will be prefect

   $(document).ready(function() {
   var column ;
    $(':input').focus(function(){
        column = $(this).parent('td').index();
        column = column+1;
        console.log(column); //logs number of the column

    })
     $('.search').keyup(function(){

        var v = $(this).val();
         if(v.length == 0) {
         $('#fbody tr td:nth-child('+column+')').show();

         }else{
            console.log(v.length);
            $('#fbody tr td:nth-child('+column+')').not( $('#fbody tr td:nth-child('+column+')').filter("*:contains('"+v+"')")).hide();
            $('#fbody tr td:nth-child('+column+')').filter("*:contains('"+v+"')").show();

         }

     })
  });

Answer 2

You can do something like this, I didn't reuse any of the code you had. I explained in mines what it's doing though.

$("th input[type=text]").keyup(function () {
    var reg = new RegExp(this.value, 'i'); // <-- regex case insensitive
    var ind = $(this).closest('th').index(); // index of th - so we know which side to filter
    var tds = $('tr').find('td:eq(' + ind + ')'); // get the corresponding td's
    var match = tds.filter(function (i, v) {
      return reg.test($(v).text()); // return only td's that match
    });
    tds.not(match).css('visibility', 'hidden'); // hide ones that don't match
    match.css('visibility', 'visible'); // show matching
});

FIDDLE

Answer 3

I do not understand it exactly. I did some simple example, with only one column test:

 $(document).ready(function() {

    $("input[name=Animals]").keydown(function() {
        setTimeout(function() {
            $("td:first", "tbody>tr").each(function() {
                lookfor = $("input[name=Animals]").val();
                if (new RegExp(lookfor, "i").test($(this).text()))
                    $(this).parent().show();
                else
                    $(this).parent().fadeOut();
            }, 0);

        });

    });
});

p.s. If you use key tracking handle keydown and then let browser to update by setTimeout(yourjob,0). It has better feeling for user.

http://jsfiddle.net/mAAvW/19/