如何根据用户输入过滤 div 元素

Question

我正在尝试根据用户输入过滤 div 元素，我已经用 table 元素完成了，但现在我需要在 div 元素中做同样的事情。

用户输入

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Teacher.." title="Type in a name"><br/>

表数据

<div style="border:1px solid gray">

<table id="myTable" >
    <c:forEach var="tr" items="${teachersList}">

    <tr><td><a href="teacher_view_adm?tcrId=${tr.id}" >${tr.fname} ${tr.lname}</a><br/>Last Seen</td>

    </tr>

    </c:forEach>

    </table>
</div>

表脚本

<script>
function myFunction() {

  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");

  filter = input.value.toUpperCase();

  if(filter==""){

      }

  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];

    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }

}
</script>

上面的代码适用于表格元素，但如何更改为 div 元素。下面我指定 div 元素数据的结构。

div元素

 <div style="border:1px solid gray" id="myDiv">


        <c:forEach var="tr" items="${teachersList}">
    <div>
        <p><a href="teacher_view_adm?tcrId=${tr.id}" >${tr.fname} ${tr.lname}</a><br/>Last Seen</p>


    </div>
        </c:forEach>

            </div>

我需要将上面的表格脚本更改为div 元素脚本，有人可以帮我做到这一点吗？

Answer 1

如果我理解正确，你需要这样的东西。

var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction(e) {
  var filter = e.target.value.toUpperCase();

  var list = document.getElementById("list");
  var divs = list.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    var a = divs[i].getElementsByTagName("a")[0];

    if (a) {
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        divs[i].style.display = "";
      } else {
        divs[i].style.display = "none";
      }
    }
  }

}

<input type="text" id="myInput" placeholder="Search for Teacher.." title="Type in a name"><br/>
<div id="list">
  <div>
    <p><a href="">test data 1</a><br/>Last Seen</p>
  </div>
  <div>
    <p><a href="">test data 2</a><br/>Last Seen</p>
  </div>
  <div>
    <p><a href="">new test data 3</a><br/>Last Seen</p>
  </div>
</div>

https://jsfiddle.net/npx0gv9n/