Filtering table row by select option

Question

I have a table that I'm filtering by using a select option, but I can't figure out how to go back and show all data after the initial filter. Also I need help drying my code.

// SHOWS INDIVIDUAL FILTER BUT CAN'T SHOW ALL
$(document).ready(function($) {
    $("#sortAwardType").change(function() {
        $("table").show();
        var selection = $(this).val().toUpperCase();
        var dataset = $(".awards-body").find("tr");
        dataset.show();
        if(selection) {
            dataset.filter(function(index, item) {
            // Filter shows table row with the word 'General'
            return $(item).find(":contains('General')").text().toUpperCase().indexOf(selection) === -1;}).hide();
        } else {
            // .all corresponds to a "Show All" option. When selected the data doesn't show
            $("#sortAwardTable").change(function(){
                $(".all").dataset.show();
            });
        }
    });
});



    // ATTEMPTING DRY CODE. NOW I CAN'T FILTER AT ALL
$(document).ready(function($) {
    $("#sortAwardType").change(function() {
        $("table").show();
        var selection = $(this).val().toUpperCase();
        var dataset = $(".awards-body").find("tr");
        var match = [
                     ":contains('General')", 
                     ":contains('Free')",
                     ":contains('Regional')",
                     ":contains('Demographic')"];
        dataset.show();
        if(selection) {
            dataset.filter(function(index, item) {
            return $(item).find(match).text().toUpperCase().indexOf(selection) === -1;}).hide();
        } else {
            // .all corresponds to a "Show All" option. When selected I want all data to show but instead it only shows an empty table (header present  but no rows)
            $("#sortAwardTable").change(function(){
                $(".all").dataset.show();
            });
        }
    });
});

I don't want to keep repeating the if block only to change the ":contains('_____')". I tried grouping them in an array and assigning them to var match, but then the filter doesn't work.

https://stackoverflow.com/questions/9127498/how-to-perform-a-real-time-search-and-filter-on-a-html-table/9127872#9127872 — dfsq, Jan 25 '19 at 16:16

score 0 · Accepted Answer · answered Jan 25 '19 at 16:09

salam , you have just to put all contains selectors in the same string

$(item).find(":contains('General'),:contains('Free'),:contains('Regional'),:contains('Demographic')").

but if you want take it easy follow my ex:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchBox">
<table id='testTable'>
<tr >
 <td>aa</td>
 <td>bb</td>
 <td>cc</td>
</tr>
<tr >
 <td>ab</td>
 <td>bc</td>
 <td>cd</td>
</tr>
<tr >
 <td>zz</td>
 <td>ee</td>
 <td>ff</td>
</tr>
</table>

<script>
 $('#searchBox').keyup(function(){
  var val = $(this).val().toLowerCase();
    if(val ===""){
     $("#testTable > tbody > tr").toggle(true);
     return;
    }
    $("#testTable > tbody > tr").toggle(false);
    
    $("#testTable").find("td").each(function(){
     if($(this).text().toLowerCase().indexOf(val)>-1)
                        $(this).parent().toggle(true);
    });
 });

 
</script>

THANK YOU! I can't believe it's as simple as putting all the :contains('____') in the same string. Why didn't I think of that?! I'm using a dropdown for this particular problem, but thanks for search example too! — TJS13, Jan 26 '19 at 02:34

Filtering table row by select option

1 Answers1