Skip to content
Advertisement

How to filter multiple query in a table with W3.JS? which every query separated with semicolon (;)

There is no problem in the code that I have typed, but I want to know how to make every word that I look for can be separated by ;.

Here is my code:

<!DOCTYPE html>
<html>
<title>W3.JS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body class="w3-container">

<h2>Testing W3.JS with CSS</h2>

<h2>Filter Table</h2>

<p>Search for a name in the input field:</p>

<p>
<input oninput="w3.filterHTML('#id01', '.item', this.value)" class="w3-input" placeholder="Search for names..">
</p>

<table id="id01" class="w3-table-all">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>Berlin</td>
    <td>Germany</td>
  </tr>
  <tr class="item">
    <td>Berglunds snabbköp</td>
    <td>Lule </td>
    <td>Sweden</td>
  </tr>
  <tr class="item">
    <td>Centro comercial Moctezuma</td>
    <td>México D.F.</td>
    <td>Mexico</td>
  </tr>
  <tr class="item">
    <td>Ernst Handel</td>
    <td>Graz</td>
    <td>Austria</td>
  </tr>
  <tr class="item">
    <td>FISSA Fabrica Inter. Salchichas S.A.</td>
    <td>Madrid</td>
    <td>Spain</td>
  </tr>
  <tr class="item">
    <td>Galería del gastrónomo</td>
    <td>Barcelona</td>
    <td>Spain</td>
  </tr>
  <tr class="item">
    <td>Island Trading</td>
    <td>Cowes</td>
    <td>UK</td>
  </tr>
  <tr class="item">
    <td>Königlich Essen</td>
    <td>Brandenburg</td>
    <td>Germany</td>
  </tr>
  <tr class="item">
    <td>Laughing Bacchus Wine Cellars</td>
    <td>Vancouver</td>
    <td>Canada</td>
  </tr>
  <tr class="item">
    <td>Magazzini Alimentari Riuniti</td>
    <td>Bergamo</td>
    <td>Italy</td>
  </tr>
  <tr class="item">
    <td>North/South</td>
    <td>London</td>
    <td>UK</td>
  </tr>
  <tr class="item">
    <td>Paris spécialités</td>
    <td>Paris</td>
    <td>France</td>
  </tr>
  <tr class="item">
    <td>Rattlesnake Canyon Grocery</td>
    <td>Albuquerque</td>
    <td>USA</td>
  </tr>
  <tr class="item">
    <td>Simons bistro</td>
    <td>København</td>
    <td>Denmark</td>
  </tr>
  <tr class="item">
    <td>The Big Cheese</td>
    <td>Portland</td>
    <td>USA</td>
  </tr>
  <tr class="item">
    <td>Vaffeljernet</td>
    <td>Århus</td>
    <td>Denmark</td>
  </tr>
  <tr class="item">
    <td>Wolski Zajazd</td>
    <td>Warszawa</td>
    <td>Poland</td>
  </tr>
</table>

</body>
</html>

For example, I’m looking for Germany and Sweden [Germany;Sweden]. The result should exclude or hide other elements except German and Sweden.

Any solution for this?

Advertisement

Answer

You will need to rebuild the w3.filterHTML to handle this request. The default way w3 has coded the function will not let you do this. I have created a new script called w3.advancedFilterHTML. This filter will get the job done and we dont have to worry about removing the original w3 filter.

You will implement it by changing your oninput code to look like this:

oninput="w3.advancedFilterHTML('#id01', '.item', this.value)"

And you will add this javascript to the page:

<script>
  w3.advancedFilterHTML = function(id, sel, filter) {
    var a, b, c, i, ii, iif, iii, hit;
    var advancedFilter = filter.split(";");

    a = w3.getElements(id);
    for (i = 0; i < a.length; i++) {
      b = w3.getElements(sel);

      for (ii = 0; ii < b.length; ii++) {
        hit = 0;

        for (iif = 0; iif < advancedFilter.length; iif++) {

          if (b[ii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) {
            hit = 1;
          }

          c = b[ii].getElementsByTagName("*");
          for (iii = 0; iii < c.length; iii++) {
            if (c[iii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) {
              hit = 1;
            }
          }

          if (hit == 1) {
            b[ii].style.display = "";
          } else {
            b[ii].style.display = "none";
          }          

        }

      }

    }
  };
</script>

Here is a working example:

<!DOCTYPE html>
<html>
<title>W3.JS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>

<body class="w3-container">

  <h2>Testing W3.JS with CSS</h2>

  <h2>Filter Table</h2>

  <p>Search for a name in the input field:</p>

  <p>
    <input oninput="w3.advancedFilterHTML('#id01', '.item', this.value)" class="w3-input" placeholder="Search for names..">
  </p>

  <table id="id01" class="w3-table-all">
    <tr>
      <th>Customer</th>
      <th>City</th>
      <th>Country</th>
    </tr>
    <tr class="item">
      <td>Alfreds Futterkiste</td>
      <td>Berlin</td>
      <td>Germany</td>
    </tr>
    <tr class="item">
      <td>Berglunds snabbköp</td>
      <td>Lule </td>
      <td>Sweden</td>
    </tr>
    <tr class="item">
      <td>Centro comercial Moctezuma</td>
      <td>México D.F.</td>
      <td>Mexico</td>
    </tr>
    <tr class="item">
      <td>Ernst Handel</td>
      <td>Graz</td>
      <td>Austria</td>
    </tr>
    <tr class="item">
      <td>FISSA Fabrica Inter. Salchichas S.A.</td>
      <td>Madrid</td>
      <td>Spain</td>
    </tr>
    <tr class="item">
      <td>Galería del gastrónomo</td>
      <td>Barcelona</td>
      <td>Spain</td>
    </tr>
    <tr class="item">
      <td>Island Trading</td>
      <td>Cowes</td>
      <td>UK</td>
    </tr>
    <tr class="item">
      <td>Königlich Essen</td>
      <td>Brandenburg</td>
      <td>Germany</td>
    </tr>
    <tr class="item">
      <td>Laughing Bacchus Wine Cellars</td>
      <td>Vancouver</td>
      <td>Canada</td>
    </tr>
    <tr class="item">
      <td>Magazzini Alimentari Riuniti</td>
      <td>Bergamo</td>
      <td>Italy</td>
    </tr>
    <tr class="item">
      <td>North/South</td>
      <td>London</td>
      <td>UK</td>
    </tr>
    <tr class="item">
      <td>Paris spécialités</td>
      <td>Paris</td>
      <td>France</td>
    </tr>
    <tr class="item">
      <td>Rattlesnake Canyon Grocery</td>
      <td>Albuquerque</td>
      <td>USA</td>
    </tr>
    <tr class="item">
      <td>Simons bistro</td>
      <td>København</td>
      <td>Denmark</td>
    </tr>
    <tr class="item">
      <td>The Big Cheese</td>
      <td>Portland</td>
      <td>USA</td>
    </tr>
    <tr class="item">
      <td>Vaffeljernet</td>
      <td>Århus</td>
      <td>Denmark</td>
    </tr>
    <tr class="item">
      <td>Wolski Zajazd</td>
      <td>Warszawa</td>
      <td>Poland</td>
    </tr>
  </table>

  <script>
    w3.advancedFilterHTML = function(id, sel, filter) {
      var a, b, c, i, ii, iif, iii, hit;
      var advancedFilter = filter.split(";");

      a = w3.getElements(id);
      for (i = 0; i < a.length; i++) {
        b = w3.getElements(sel);

        for (ii = 0; ii < b.length; ii++) {
          hit = 0;

          for (iif = 0; iif < advancedFilter.length; iif++) {

            if (b[ii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) {
              hit = 1;
            }

            c = b[ii].getElementsByTagName("*");
            for (iii = 0; iii < c.length; iii++) {
              if (c[iii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) {
                hit = 1;
              }
            }

            if (hit == 1) {
              b[ii].style.display = "";
            } else {
              b[ii].style.display = "none";
            }

          }

        }

      }
    };
  </script>

</body>

</html>
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement