如何根据用户输入过滤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/

Answer 2

您可以尝试如下操作：

理念

• 获取父div并检查其内部是否包含div 。
• 如果是，请使用递归进行验证。
• 如果不是，请直接对其进行验证。
• 要进行验证，请接受searchQuery和div的文本并将其解析为小写。 这将允许您执行不区分大小写的搜索。
• 他们只是检查searchQuery本中是否存在searchQuery 。 如果是，则添加一个类（ hide ）。 如果否，请将其删除。

 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>