Как показать "нет результатов, попробуйте еще раз" в фильтре переключения jquery

Question

• 1000 нет результатов: https://www.coderbench.com/develop-jquery-data-table-search-filter/

Вот сценарий:

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

  });
});

Это работает для того, что мне нужно, за исключением того, что я хочу отображать следующий текст над моей таблицей, когда нет совпадений строк, и все строки переключаются скрытыми:

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

Я полагаю, что я мог бы сделать здесь какой-то сложный условный оператор, но мне интересно, есть ли простой способ сделать это ... как часто бывает. Спасибо! Вот полный пример страницы:

      <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

Вот моя попытка.

Я редко использую jQuery, поэтому не стесняйтесь адаптировать вещи к более «jQuery» - способу.

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>