Count Filtered Results only from HTML Table

This exact same question was asked by jmpman. i have the same question and was wondering if there is a way i can implement it using Brian Thopset's answer. I tried to mimic it and adapt it to suit me but alas i failed miserably. So basically in my table as the filter is being run it must tell how many rows are still visible or at least as per Brian's answer how many rows are now visible on the page. please hemp

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Row count Test</title>
</head>

<input id="myInput" type="search" placeholder="Filter Criteria..">

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Code</th>
      <th>Min</th>
      <th>Reorder</th>
      <th>Max</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>Cars</td>
      <td>20426</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Planes</td>
      <td>20427</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Bikes</td>
      <td>56890</td>
      <td>5</td>
      <td>8</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Boats</td>
      <td>28772</td>
      <td>5</td>
      <td>8</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Helicopters</td>
      <td>28960</td>
      <td>5</td>
      <td>8</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

<p>Number of rows = x</p>

</html>

I tried some of the solutions offered here on similar questions here on stack overflow and from other forums. but none of them seem to work. i just want to add a paragraph to the of the table saying x number of entries found for current search criteria. Above is my entire code

Solution

The filter() callback function should return a boolean value that indicates whether a row should be included in the results. Assign this to a variable. You can then get the length of this and use it to show the selected rows.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    const value = $(this).val().toLowerCase();
    $("#myTable tr").hide();
    const shown =
      $("#myTable tr").filter(function() {
        return $(this).text().toLowerCase().includes(value)
      });
    shown.show();
    $("#count").text(shown.length);
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Row count Test</title>
</head>

<input id="myInput" type="search" placeholder="Filter Criteria..">

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Code</th>
      <th>Min</th>
      <th>Reorder</th>
      <th>Max</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>Cars</td>
      <td>20426</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Planes</td>
      <td>20427</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Bikes</td>
      <td>56890</td>
      <td>5</td>
      <td>8</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Boats</td>
      <td>28772</td>
      <td>5</td>
      <td>8</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Helicopters</td>
      <td>28960</td>
      <td>5</td>
      <td>8</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

<p>Number of rows = <span id="count">x</span></p>

</html>