如何在jquery切换搜索过滤器上显示 "无结果再试"？

Question

我正在定制这个基本的jQuery Data Table with Search Filter教程，供自己使用，它非常好用，只是我不知道如何在过滤器没有返回结果时切换显示特定的消息。https:/www.coderbench.comdevelop-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>