How To filter div element based on user input

Question

I am trying to filter the div element based on user input i already done with table element but now i need to do the same in div element.

User Input

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

Table data

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

Table script

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

above code works fine for table elements but how can i change to div elements. bellow i specify the structure of div element data.

Div element

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

I need to change the above table script to div element script can any one help me to do this?

Answer 1

If I understand correctly, you need something like this.

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/