CODEWITHSUNDEEP
javascriptjqueryhtml
NarendraR
NarendraR

Reputation: 7708

JQuery filter based on text match in row

I'm newbie in JQuery. I have below HTML :

<div class="search-button">
   <label for="filter">Store Name:</label>
   <select class="filter" data-tableId="table1" onchange="testFilter()">
  <option value="all">All Stores</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="United States">United States</option>
  <option value="France">France</option>
  <option value="Denmark">Denmark</option>
  <option value="Ireland">Ireland</option>
   </select>
</div>

<div id="recordContent">
   <table id="orderTable">
  <tbody>
     <tr>
        <th>Store Name</th>
        <th>Language Code</th>
        <th>Testcase Name</th>
        <th>Order Id</th>
        <th>Order Total</th>
        <th>Order Date</th>
     </tr>
     <tr class="record">
        <td class="store">ireland</td>
        <td class="langCode">en_IE</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">4001820209</td>
        <td class="orderTotal">19.98</td>
        <td class="orderDate">12-02-2019 15:37:30.201</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">denmark</td>
        <td class="langCode">en_DK</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">6001825084</td>
        <td class="orderTotal">338 DKK</td>
        <td class="orderDate">12-02-2019 15:37:35.140</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">7002541022</td>
        <td class="orderTotal">13.04</td>
        <td class="orderDate">12-02-2019 15:45:08.038</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">2001741036</td>
        <td class="orderTotal">69.90</td>
        <td class="orderDate">12-02-2019 15:46:33.310</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">7002541028</td>
        <td class="orderTotal">8.14</td>
        <td class="orderDate">12-02-2019 15:50:04.713</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">2001741030</td>
        <td class="orderTotal">15.98</td>
        <td class="orderDate">12-02-2019 15:51:23.551</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">france</td>
        <td class="langCode">en_FR</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">11002001160</td>
        <td class="orderTotal">35.44</td>
        <td class="orderDate">12-02-2019 15:53:45.130</td>
     </tr>
     <tr></tr>
  </tbody>
   </table>
</div>

And using below JQuery function to filter the records based on column text but not able to filter the records based on store name :

<script>
function testFilter(){
$(".filter").change(function() {
    var filterValue = $(this).val();
    var row = $('.record'); 
      console.log(filterValue);
    row.hide()
    row.each(function(i, el) {
         if($(el).children().innerHTML == filterValue) {
             $(el).show();
         }
    })   
});
}
</script>

Upvotes: 0

Views: 53

Answers (3)

aslawin
aslawin

Reputation: 1981

This is because values of options in select not corresponding to fields in table. I've made few improvements in your js code:

  // I removed onchange property of your select 
  // because change event is already attached in this code
  $(".filter").change(function() {
      var translatedFilterValue = getTranslatedFilterValue($(this).val());
      var rows = $('.record'); 

      rows.each(function(i, el) {
           if(translatedFilterValue == 'all' || ($(el).find('.store').text() == translatedFilterValue)) {
               $(el).show();
           } else {
               $(el).hide();
           }
      })   
  });

  //
  // Translates text from select to corresponding values in table
  // for example: from "United States" to "united_states"
  //
  function getTranslatedFilterValue(filterValue) {
    filterValue = filterValue.toLowerCase();

    return filterValue.replace(' ', '_');
  }

Working fiddle: CLICK!

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Some changes to your code.

In order to make your filter better, you need to keep values of select ddl as same as table's (.store) values.

United Kingdom != united_kingdom

function testFilter(obj) { 

// removed .change because this method is already invoking on onchange

  var filterValue = $(obj).val(); 
  var row = $('.record');
  console.log(filterValue);
  row.hide()
  row.each(function(i, el) {

    if (

    $(el).text().toUpperCase().indexOf(filterValue.toUpperCase()) > -1 

    // used .text(), because .innerHTML will return nodes as well
    // whole content can't be same, so checked index of selected filter word
    // You can add .find('.store') if you want to make search in only store column
    // .toUpperCase() will maintain accuracy for sentence case. cause 'denmark' == 'Denmark' will return false
      ) {
      $(el).show();
    }
  })

}


function testFilter(obj) { // removed .change because this method is already invoking on onchange
  var filterValue = $(obj).val(); 
  var row = $('.record');
  console.log(filterValue);
  row.hide()
  row.each(function(i, el) {
    // used .text(), because .innerHTML will return nodes as well
    if (
$(el).text().toUpperCase().indexOf(filterValue.toUpperCase()) > -1 // whole content can't be same, so checked index of selected filter word
) {
      $(el).show();
    }
  })

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-button">
  <label for="filter">Store Name:</label>
  <select class="filter" data-tableId="table1" onchange="testFilter(this)">
    <option value="all">All Stores</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States">United States</option>
    <option value="France">France</option>
    <option value="Denmark">Denmark</option>
    <option value="Ireland">Ireland</option>
  </select>
</div>

<div id="recordContent">
  <table id="orderTable">
    <tbody>
      <tr>
        <th>Store Name</th>
        <th>Language Code</th>
        <th>Testcase Name</th>
        <th>Order Id</th>
        <th>Order Total</th>
        <th>Order Date</th>
      </tr>
      <tr class="record">
        <td class="store">ireland</td>
        <td class="langCode">en_IE</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">4001820209</td>
        <td class="orderTotal">19.98</td>
        <td class="orderDate">12-02-2019 15:37:30.201</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">denmark</td>
        <td class="langCode">en_DK</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">6001825084</td>
        <td class="orderTotal">338 DKK</td>
        <td class="orderDate">12-02-2019 15:37:35.140</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">7002541022</td>
        <td class="orderTotal">13.04</td>
        <td class="orderDate">12-02-2019 15:45:08.038</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">2001741036</td>
        <td class="orderTotal">69.90</td>
        <td class="orderDate">12-02-2019 15:46:33.310</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">7002541028</td>
        <td class="orderTotal">8.14</td>
        <td class="orderDate">12-02-2019 15:50:04.713</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">2001741030</td>
        <td class="orderTotal">15.98</td>
        <td class="orderDate">12-02-2019 15:51:23.551</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">france</td>
        <td class="langCode">en_FR</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">11002001160</td>
        <td class="orderTotal">35.44</td>
        <td class="orderDate">12-02-2019 15:53:45.130</td>
      </tr>
      <tr></tr>
    </tbody>
  </table>
</div>

Upvotes: 1

epascarello
epascarello

Reputation: 207501

$(el).children().innerHTML is looking at all the text for the entire row. That is NOT going to match your string. Other issue value has caps, the values in the table do not. There is an underscore and the values do not.

You should not have an onchange event inline and than bind onchange to that element with jQuery inside of it.

The code is commented.

$(".filter").change(function() {
  var filterValue = $(this)
    .val()  // get the value of the select
      .toLowerCase()  // normalize it
        .replace(/\s/g,'_');  // replace the spaces
  var rows = $('.record');  // grab all the rows
  rows.show();  // show them
  if (filterValue !== 'all') {  // if we have all, than skip this
    rows
      .find("td.store")  // find the store tds
        .filter(function() {  // loop over read the text and see if it does not match the filter value
          return this.textContent.toLowerCase().trim() !== filterValue
        })
          .parent()  // find the trs
            .hide()  // hide the table rows that do not match
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-button">
  <label for="filter">Store Name:</label>
  <select class="filter" data-tableId="table1">
    <option value="all">All Stores</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States">United States</option>
    <option value="France">France</option>
    <option value="Denmark">Denmark</option>
    <option value="Ireland">Ireland</option>
  </select>
</div>

<div id="recordContent">
  <table id="orderTable">
    <tbody>
      <tr>
        <th>Store Name</th>
        <th>Language Code</th>
        <th>Testcase Name</th>
        <th>Order Id</th>
        <th>Order Total</th>
        <th>Order Date</th>
      </tr>
      <tr class="record">
        <td class="store">ireland</td>
        <td class="langCode">en_IE</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">4001820209</td>
        <td class="orderTotal">19.98</td>
        <td class="orderDate">12-02-2019 15:37:30.201</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">denmark</td>
        <td class="langCode">en_DK</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">6001825084</td>
        <td class="orderTotal">338 DKK</td>
        <td class="orderDate">12-02-2019 15:37:35.140</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">7002541022</td>
        <td class="orderTotal">13.04</td>
        <td class="orderDate">12-02-2019 15:45:08.038</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">2001741036</td>
        <td class="orderTotal">69.90</td>
        <td class="orderDate">12-02-2019 15:46:33.310</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">7002541028</td>
        <td class="orderTotal">8.14</td>
        <td class="orderDate">12-02-2019 15:50:04.713</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">2001741030</td>
        <td class="orderTotal">15.98</td>
        <td class="orderDate">12-02-2019 15:51:23.551</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">france</td>
        <td class="langCode">en_FR</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">11002001160</td>
        <td class="orderTotal">35.44</td>
        <td class="orderDate">12-02-2019 15:53:45.130</td>
      </tr>
      <tr></tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions