如何在整個 div 上制作搜索過濾器

Question

我的項目中有這樣的 HTML 代碼

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

div=row 繼續持續大約 10 行。 制作 10 行和 40 個這樣的人，圖像和名稱顯示在屏幕上。

我想取第一個名字

可搜索行中的標記。 當匹配時，應該只彈出 id 為“columndiv”的 div。 這樣只會顯示搜索到的人的 div。

我的功能看起來像這樣

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

綜上所述，只有

帶有名稱的標簽是可搜索的。 但是我想要搜索的 div，顯示名稱和圖像。

我該怎么做

Answer 1

您正在更改每個 p-tag 的顯示值，而不是整個 div。 只需運行所有 DIV 而不是所有 P：

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