如何在整个 div 上制作搜索过滤器

Question

I have HTML code like this in my project

        <div class="container" id="containerdiv">
        <div id="rollingdiv">
        <div class="row">
            <div class="col-3" id="columndiv">
                <a href="https://www.linkedin.com/in/arun7kumar/">
                <div>
                    <img class="icontrial" src="img/iAngelsmugshotsblackandwhite/ArunKumar.jpeg" alt="">
                </div>
                <div class="texttrial">
                    <p>Arun Kumar</p>
                    <p>Technology</p>
                 </div>   
                </a>
             </div>
            <div class="col-3" id="columndiv">
                <a href="https://www.linkedin.com/in/meeraiyer/">
                <div>
                    <img class="icontrial" src="img/iAngelsmugshotsblackandwhite/MeeraIyer.jpeg" alt="">
                </div>
                <div class="texttrial">
                    <p>Meera Iyer</p>
                    <p>Marketing & Communication</p>
                 </div>  
                 </a>
            </div>
            <div class="col-3" id="columndiv">
                <a href="www.linkedin.com/in/prashant-rohatgi-47b6472">
                <div>
                    <img class="icontrial" src="img/iAngelsmugshotsblackandwhite/PrashantRohtagi.jpeg" alt="">
                </div>
                <div class="texttrial">
                    <p>Prashant Rohtagi</p>
                    <p>Digital Transformation</p>
                 </div>
                 </a>
            </div>
            <div class="col-3" id="columndiv">
                <a href="www.linkedin.com/in/richa-arora-05127aa">
                <div>
                    <img class="icontrial" src="img/iAngelsmugshotsblackandwhite/RichaArora.jpeg" alt="">
                </div>
                <div class="texttrial">
                    <p>Richa Arora</p>
                    <p>Sales</p>
                 </div> 
                 </a>
            </div>
        </div>

The div=row onwards keeps continuing for about 10 rows. Making 10 rows and 40 such folks with image and name displayed on screen.

I want to make the name which is the first

tag in the row searchable. When there is a match, only the div with the id "columndiv" should pop up. So that only the div for the searched person gets displayed.

My function looks like this

<script>
    

    function myFunction() {
          var input, filter, ul, li, a, i, txtValue;
          var divValues = []
          input = document.getElementById('myInput');
          filter = input.value.toUpperCase();
          ul = document.getElementById("containerdiv");
          li = ul.getElementsByTagName('p');
          console.log(li)
        
          // Loop through all list items, and hide those who don't match the search query
          for (i = 0; i < li.length; i++) {
            console.log("hi i am inside")
            a=li[i]
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              li[i].style.display = "";
            } else {
              li[i].style.display = "none";
            }
          }
}
</script>

With the above, only the

tag with the name is searchable. However I want the searched div, with the name, image displayed.

How do I go about doing this

Answer 1

You are changing the display value for each p-tag and not for the whole div. Just run through all DIVs instead of all Ps:

function myFunction() {
      var input, filter, ul, li, a, i, txtValue;
      input = document.getElementById('myInput');
      filter = input.value.toUpperCase();
      ul = document.getElementById("containerdiv");
      li = ul.getElementsByClassName('col-3'); //<<<<<<<<<<<<<<<< Change this line
    
      // Loop through all list items, and hide those who don't match the search query
      for (i = 0; i < li.length; i++) {
        a=li[i]
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }