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

I believe the stack overflow article you are looking for is this https://stackoverflow.com/questions/9127498/how-to-perform-a-real-time-search-and-filter-on-a-html-table — Dmitriy, Nov 07 '18 at 13:31

score 1 · Accepted Answer · answered Nov 07 '18 at 13:46

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

i appreciate your effort but the function has to hide everything not matching the input. your function hides everything and shows it when the match is typed. So if the input is empty nothing should be hidden. — T. Tom, Nov 07 '18 at 13:58
@T.Tom happy to help. I think you can slightly tweak the logic to make it fit for your requirement — brk, Nov 07 '18 at 14:06
is it still not working at all after doing what @brk has suggested, or you are stuck at some point? — Subhasish Bhattacharjee, Nov 07 '18 at 14:54
brk's suggestion is not exactly what i needed so i tried to adjust it myself. the result is on the bottom of my question. — T. Tom, Nov 07 '18 at 15:01

javascript search function for hiding everything not matching input

1 Answers1