如何在 jquery 切换搜索过滤器上显示“无结果重试”

Question

I am customizing this basic jQuery Data Table with Search Filter tutorial for my own use and it works great except I can't figure out how to toggle to show a specific message when the filter returns no results: https://www.coderbench.com/develop-jquery-data-table-search-filter/

Here is the script:

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

  });
});

This works for what I need except I want to display the following text above my table when there are no row matches and all rows are toggled hidden:

 <span class="warning">Your search returned no results, please modify your entry.</span>

I imagine there's some elaborate conditional statement I could make here but I'm wondering if there's a simple way to do this....as is often the case. Thanks: Here is the full sample page:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
       </script>
        <script>
        $(document).ready(function(){
         $("#txtsearch").keyup(function(){
            var value = $(this).val().toLowerCase();
            $("#table tr").filter(function() {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });

          });
        });
        </script>
        <style>
        table {
            font-family: arial;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 1px solid #e3e3e3;
            text-align: left;
            padding: 8px;
        }
        tr:nth-child(even) {
            background-color: #efefef;
        }
        </style>
        <div>
        <input id="txtsearch" type="text" placeholder="Search Here..." />
        <br><br>
        <table>
          <thead>
            <tr>
              <th>Movies</th>
              <th>Rating</th>
            </tr>
          </thead>
          <tbody id="table">
            <tr>
              <td>Spiderman Homecoming</td>
              <td>9/10</td>
            </tr>
            <tr>
              <td>Wonder Woman</td>
              <td>8/10</td>
            </tr>
            <tr>
              <td>The Guardians of Galaxy 2</td>
              <td>8/10</td>
            </tr>
            <tr>
              <td>Ant Man</td>
              <td>7.5/10</td>
            </tr>
          </tbody>
        </table>
        </div>

Answer 1

Here's my try.

I don't use jQuery much so feel free to adapt things to a more "jQuery"-way.

 const warning = document.querySelector('.warning'); const table = document.querySelector('table'); $(document).ready(function() { $("#txtsearch").keyup(function() { let value = $(this).val().toLowerCase(); let numberOfResults = 0; $("#table tr").filter((index, tableRow) => { let isAMatch = $(tableRow).text().toLowerCase().indexOf(value) > -1; $(tableRow).toggle(isAMatch); if (isAMatch) { numberOfResults++; } }); if (numberOfResults === 0) { warning.classList.add('show') table.classList.add('no-results'); } else { warning.classList.remove('show'); table.classList.remove('no-results'); } }); });

 table { font-family: arial; border-collapse: collapse; width: 100%; } table.no-results { display: none; } td, th { border: 1px solid #e3e3e3; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #efefef; }.warning { margin-bottom: 10px; display: none; }.warning.show { display: block; }

 <div> <span class="warning">Your search returned no results, please modify your entry.</span> <input id="txtsearch" type="text" placeholder="Search Here..." /> <br><br> <table> <thead> <tr> <th>Movies</th> <th>Rating</th> </tr> </thead> <tbody id="table"> <tr> <td>Spiderman Homecoming</td> <td>9/10</td> </tr> <tr> <td>Wonder Woman</td> <td>8/10</td> </tr> <tr> <td>The Guardians of Galaxy 2</td> <td>8/10</td> </tr> <tr> <td>Ant Man</td> <td>7.5/10</td> </tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>