0

I have a table similar to this:

<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>

Then what I want to do is to search through the table and show the elements where the search criteria is matched, and expand their respective subparent ("parent" is never hidden).

If I search for "child two", then both child and subparent for "child two" should be toggled, but neither child or subparent for "child one" should be toggled. A search for "child" should toggle both children and both subparents.

Here's my current script, which sort of works, but it also toggles the subparents whose children does not match the search:

<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>

The structure of the table is as follows:

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

In larger scale, this translates to:

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

Hence, I need to search all data, which are hidden below (sub)parent, and expand the child and subparent for all matches in search.

How can I make this toggle only the subparents where the children match the search?

3
  • What if the match was found in a subparent or parent row to begin with, what should happen then?
    – CBroe
    Feb 24, 2020 at 12:17
  • Please provide sample code that makes basic sense at least. $("#mySearch.on("keyup", is an obvious syntax error, $("#searchable tr.filter)(function() is another one.
    – CBroe
    Feb 24, 2020 at 12:18
  • @CBroe: If the search only matches subparent or parent, it doesn't need to show, as it's the child data that are relevant for the search. Parents and subparents are simply means of categorizing. As for the syntax errors, those were typos, the code didn't include them. I've edited the sample code to match it.
    – Erik
    Feb 24, 2020 at 12:47

1 Answer 1

1

You can use below script where on keyup event you need to hide all rows first and then filter child rows for which match found and if match found then show its subparent too.

see below code

$(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>

2
  • This works, but only if the child matched in search is the first entry after the subparent. If another child is prior to the matched one, then the subparent won't show.
    – Erik
    Feb 25, 2020 at 7:53
  • happy to help you :) Feb 26, 2020 at 4:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.