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

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

＆＃13;

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

＆＃13;

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

＆＃13;

https://jsfiddle.net/npx0gv9n/

Answer 2

您可以尝试这样的事情：

观

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

＆＃13;

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'));

＆＃13;

.hide {
  display: none
}

＆＃13;

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

＆＃13;

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

2 个答案:

观