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

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/

Answer 2

You can try something like this:

Idea

• Get the parent div and check if it has div s inside it.
• If yes, use recursion to validate them.
• If not, validate them directly.
• To validate, accept searchQuery and div 's text and parse them to lowercase. This will allow you to do case insensitive search.
• Them just check for existence of searchQuery in this text. If yes, add a class ( hide ). If no, remove it.

 function searchMyValue(container) { var search = document.getElementById('txtQuery').value.toLowerCase(); var text = container.textContent.toLowerCase(); var childDivs = container.querySelectorAll('div'); if (childDivs.length) { Array.prototype.slice.call(childDivs).forEach(x => searchMyValue(x)); } else if (search.trim() && text.indexOf(search) < 0) { container.classList.add('hide') } else { container.classList.remove('hide') } } var btn = document.getElementById('btnSearch') btn.addEventListener("click", searchMyValue.bind(btn, document.querySelector('.container'))) function createDivs(array, element) { var divs = []; for (var i = 0; i < array.length; i++) { (function(i) { var d = document.createElement('div'); var p = document.createElement('p'); var a = document.createElement('a'); a.textContent = array[i]; p.append(a); d.append(p); divs.push(d); })(i) } element.append.apply(element, divs) } createDivs(["foo", "bar", "Hello World", "test"], document.querySelector('.content')); createDivs(["Sachin", "Rahul", "Trend", "Virat"], document.querySelector('.content2')); 

 .hide { display: none } 

 <div class="filter"> <input type="text" id="txtQuery"> <button id="btnSearch">Search</button> </div> <div class="container"> <div class="content"></div> <div class="content2"></div> </div>