javascript search function for hiding everything not matching input

Question

I would like to implement a search function which uses input to find text on my page without pressing enter and hiding everything else not matching the current input.

Tricky stuff: the text on my page is hidden by default and only visible by hovering its container tiles. Also the entire page is built by scripts. This is the structure:

<div id="data" class="grid-container">
<div class="grid-item">
    <div class="inside" id="item0">
        <h2 id="contents0" class="content-title" href="some link">some headline</h2>
        <div class="collapsing">
            <br>
            <table>
                <tbody>
                    <tr id="tr0">
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

so there are various grid-item's like this one with different amounts of tabledata's. this is the input:

<input class="search" type="search" placeholder="Search" id="input">

Any ideas on how to do this for my special case? I want to hide the entire grid-item if nothing inside matches the current input and I want to hide only the tabledatas not matching the current input if there are matches with one ore more other tabledatas in the same grid-item.

this is my attempt at editing the suggestion down there:

<script>
        function findDom(val) {
            if (val === '') {
                document.querySelectorAll('.hideElem').forEach(function(item) {
                item.classList.remove('hideElem')
            })
            return;
            }
            document.querySelectorAll('.content').forEach(function(item) {
                if (item.textContent.trim().includes(val)) {
                    item.classList.remove('hideElem')
                }
                else {
                    item.classList.add('hideElem')
                }
            })
        }
        document.getElementById('input').addEventListener('keyup', (e) => {
            setTimeout(function() {
                findDom(e.target.value.trim())
            }, 2000)
        })
    </script>

CSS:

.hideElem {
display: none;

} However it does not work at all...

Answer 1

Please check the inline comments for description

   // this function will first check if the search value is empty , then 
   // it will get all the a tag that are visible and will hide them
   function findDom(val) {
  if (val === '') {
    document.querySelectorAll('.showElem').forEach(function(item) {
      item.classList.remove('showElem')

    })
    return;
  }
 // otherwise it is going to get the content from each a tag and will check
 // if the conent includes the search keyword, in that case it will show 
 // the a
  document.querySelectorAll('.content').forEach(function(item) {
    // hiding previously displayed a tags
    item.classList.remove('showElem')
    // check if current a tag contains this text
    if (item.textContent.trim().includes(val)) {
      item.classList.add('showElem')
    }

  })

}
// this will get the value entered in the text field
document.getElementById('ip').addEventListener('keyup', (e) => {
 // wait for 2 secs for and search for the value, without timeout it will 
 // search for every text entered
  setTimeout(function() {
    findDom(e.target.value.trim())
  }, 2000)
})

.content {
  display: none;
}

.showElem {
  display: block;
}

<div id="data" class="grid-container">
  <div class="grid-item">
    <div class="inside" id="item0">
      <h2 id="contents0" class="content-title" href="some link">some headline</h2>
      <div class="collapsing">
        <br>
        <table id='table'>
          <tbody>
            <tr id="tr0">
              <td class="tabledata">
                <a class="content" href="some link">some 1</a>
              </td>
              <td class="tabledata">
                <a class="content" href="some link">some 2</a>
              </td>
              <td class="tabledata">
                <a class="content" href="some link">some 3</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


  <input class="search" id='ip' type="text" placeholder="Search" id="input">