javascript - jQuery 在搜索中切换父级

Question

我有一个与此类似的表格:

<input id="mySearch" placeholder="Search..." type="text"/>
<table>
  <th>Main header</th>
  <tbody id="searchable">
    <tr class="parent"><td>Parent</td></tr>
    <tr class="subparent"><td>Subparent one</td></tr>
    <tr class="child"><td>Child one</td></tr>
    <tr class="subparent"><td>Subparent two</td></tr>
    <tr class="child"><td>Child two</td></tr>
  </tbody>
</table>

然后我想做的是搜索表格并显示与搜索条件匹配的元素，并展开它们各自的子父级(“父级”从不隐藏)。

如果我搜索“子二号”，则应切换“子二号”的子父级和子父级，但不应切换“子一号”的子级或子父级。搜索“child”应该切换两个子级和两个子父级。

这是我当前的脚本，它可以工作，但它也会切换其子级与搜索不匹配的子父级:

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#searchable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1).prev('.subparent').toggle();
    });
  });
});
</script>

表的结构如下:

Main category
`-> Main subcategory (parent)
`--> Specific subcategory (subparent)
`---> Data to search (child)

在更大范围内，这转化为:

Main category
`-> Parent 1
`--> Subparent 1
`---> Data 1
`---> Data 2
`---> Data 3
`--> Subparent 2
`---> Data 1
`---> Data 2
`-> Parent 2
`--> Subparent 1
`---> Data 1

因此，我需要搜索隐藏在(子)父级下方的所有数据，并展开子级和子父级以查找搜索中的所有匹配项。

如何才能仅切换子级与搜索匹配的子级？

Answer 1

您可以使用下面的脚本，在 keyup 事件中，您需要先隐藏所有行，然后过滤找到匹配项的子行，如果找到匹配项，则也显示其子父行。

看下面的代码

$(document).ready(function () {
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    //hide all rows
    $("#searchable tr.subparent, #searchable tr.child").hide();
    //show rows
    $("#searchable tr.child").filter(function() {
      var found = $(this).text().toLowerCase().indexOf(value)!=-1;
      if(found) { // show subparent if child matches
        if($(this).prev().hasClass('subparent')) {
           $(this).prev().show();
        } else {
          $(this).prevUntil('.subparent').last().prev().show();
        }
      }
      return found;
    }).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mySearch" placeholder="Search..." type="text"/>
<table>
  <th>Main header</th>
  <tbody id="searchable">
    <tr class="parent"><td>Parent</td></tr>
    <tr class="subparent"><td>Subparent one three four</td></tr>
    <tr class="child"><td>Child four</td></tr>
    <tr class="child"><td>Child three</td></tr>
    <tr class="child"><td>Child one</td></tr>
    <tr class="subparent"><td>Subparent two five six</td></tr>
    <tr class="child"><td>Child two</td></tr>
    <tr class="child"><td>Child five</td></tr>
    <tr class="child"><td>Child six</td></tr>
  </tbody>
</table>