Jquery filtering by two values

Question

This time I have a problem with jQuery filtering.

$( document ).ready(function() {
    $('#search').keyup(function() {
         var s = new RegExp(this.value);
         $('#support-tasks-table tbody tr').each(function() {
             if(s.test(this.cells[8].innerHTML))
                 $(this).show();
             else $(this).hide();
         });
    });
    $('select#sel-supporttask-projects').change(function() {
        var s = new RegExp(this.value);
        $('#support-tasks-table tbody tr').each(function() {
            if(s.test(this.cells[3].innerHTML)) $(this).show();
            else $(this).hide();
        });
    });
})

Each of this functions hides or shows table tr's by cell value and it's working fine. But when I set something on search, and after that I choose the option from select, it ignores that tr's are hidden and searching from all tr's in a table. Is there any easy way to change this code to search only by showed tr's?

Andrew Shepherd · Accepted Answer · 2016-01-14 07:59:52Z

3

The simple answer is to add :visible to the selector:

$('select#sel-supporttask-projects').change(function() {
    var s = new RegExp(this.value);
    $('#support-tasks-table tbody tr:visible').each(function() {
        if(s.test(this.cells[3].innerHTML)) $(this).show();
        else $(this).hide();
    });
});

But it highlights a design flaw: if you select a different option, you would want some answers that were previously invisible to become visible.

Essentially, you need to have a searchParameters class that includes both search filters:

var searchParameters = {
    supportTask: null,
    searchRegex: null
};

function shouldRowBeVisible(row) {
   if(searchParameters.supportTask) {
      if(!(searchParameters.supportTask.test(row.cells[3].innerHTML))) {
          return false;
       }
   }
   if(searchParameters.searchRegex) {
                if(!(searchParameters.searchRegex.test(row.cells[3].innerHTML))) {
          return false;
       }
   }
   return true;
}


function updateVisibility() {
   $('#support-tasks-table tbody tr').each(function() {
       if(shouldRowBeVisible(this) {
         $(this).show();
       } else {
         $(this).hide();
       }
    });
}

 $('#search').keyup(function() {
     searchParameters.searchRegex = new RegExp(this.value);
     updateVisibility();
});
$('select#sel-supporttask-projects').change(function() {
    searchParameters.supportTask = new RegExp(this.value);
    updateVisibility();
});

edited Jan 14, 2016 at 7:59

answered Jan 14, 2016 at 7:38

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jai Over a year ago

This is what should be done. +1 but .toggle() method will make it better.

qusqui21 Over a year ago

Yep, i just checked, is there any solution for that problem?

Andrew Shepherd Over a year ago

@qusqui21 - I've written a solution. It probably has syntax errors, but you can see the approach.

Collectives™ on Stack Overflow

Jquery filtering by two values

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related