0

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?

Grant Foster
  • 722
  • 2
  • 11
  • 21
NTUSER 89700312
  • 13
  • 2

1 Answers1

1

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>
Rick Sibley
  • 605
  • 7
  • 18