如果 <td> 包含搜索词，则显示结果，与搜索词的排列无关

Question

我想要一张表，其中包含 td 中的单词。我想知道是否有任何方式显示搜索结果，而不管用户搜索的方式如何。例如 td 包含“love and dance and sing”，但我的代码只有在用户输入“love and dance and sing”时才会显示结果。如果用户输入“dance and love”它不显示。我想显示结果而不管单词的排列， 即，如果用户输入“sing and dance”或dance and love，结果应该会显示出来。

任何帮助将不胜感激。提前致谢

这是我的代码

$(document).ready(function() {

  (function($) {

    $('#filter').keyup(function() {

      var rex = new RegExp($(this).val(), 'i');
      $('.searchable tr').hide();
      $('.searchable tr').filter(function() {
        return rex.test($(this).text());
      }).show();

    })

  }(jQuery));

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<input id="filter" type="search" placeholder="Search"></form>
<table>
  <tbody class="searchable">
    <tr>
      <td>love and dance </td>
      <td> something else</td>
    </tr>
    <tr>
      <td>play and eat </td>
      <td></td>
    </tr>
    <tr>
      <td>love and roll </td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 1

遍历搜索词并单独检查它们。不需要正则表达式。

我也会质疑你是否真的需要 jQuery；如果没有它，这段代码也同样容易编写，而且更加灵活。

$(document).ready(function() {
  (function($) {
    $('#filter').keyup(function() {
      var terms = this.value.split(' ');
      $('.searchable tr').hide();
      $('.searchable tr').filter(function() {
        for (var term of terms) {
          if (this.textContent.indexOf(term) < 0) return false;
        }
        return true;
      }).show();
    })
  }(jQuery));
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<input id="filter" type="search" placeholder="Search">
<table>
  <tbody class="searchable">
    <tr>
      <td>love and dance </td>
      <td> something else</td>
    </tr>
    <tr>
      <td>play and eat </td>
      <td></td>
    </tr>
    <tr>
      <td>love and roll </td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用 javascript includes() 函数来检查您的字符串是否是文本的子字符串。

$(document).ready(function() {
  (function($) {
    $('#filter').keyup(function() {
      var filterText = $(this).val();
      $('.searchable tr').hide();
      $('.searchable tr').filter(function() {
        return $(this).text().includes(filterText)
      }).show();
    })
  }(jQuery));
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<input id="filter" type="search" placeholder="Search"></form>
<table>
  <tbody class="searchable">
    <tr>
      <td>love and dance </td>
      <td> something else</td>
    </tr>
    <tr>
      <td>play and eat </td>
      <td></td>
    </tr>
    <tr>
      <td>love and roll </td>
      <td></td>
    </tr>
  </tbody>
</table>