javascript - 自定义 Javascript 搜索，消除与搜索参数不匹配的元素

Question

因此，我尝试在页面上创建一个搜索功能，该页面充满了分为不同部分的链接，通过消除所有与内容无关的信息，使人们更容易找到他们正在寻找的特定链接。他们正在寻找。

我希望搜索将与搜索参数不匹配的元素更改为“display:none;”但是我似乎不知道如何创建一个列表项为“display:none;”的部分也可以“显示:无；”因此，如果该部分不包含搜索参数，则该部分将不再出现。

这是我的代码:

<input type="text" id="myInput" onkeyup="mySearch()" 
placeholder="Search this page!">
<div id="content">
<section class="parent">
                <h2>heading two</h2>
                <ul class="child">
                    <li><a href="#">list item 1</a></li>
                    <li><a href="#">list item 2</a></li>
                </ul>
            </section>

            <section class="parent">
                <h2>heading two</h2>
                <ul class="child">
                    <li><a href="#">list item 3</a></li>
                    <li><a href="#">list item 4</a></li>
                </ul>
</section>
</div>

<script>
var input, filter, ul, li, a, i, parentDivs, children;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("content");
li = ul.getElementsByTagName('li');
sect = ul.getElementsByTagName('section');
parentDivs = document.getElementsByClassName("parent");
children = document.getElementsByClassName("child");

for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
  li[i].style.display = "";
} else {
  li[i].style.display = "none";
  }
 }
</script>

Answer 1

我对您的代码进行了轻微修改，以便它将遍历所有父级 div 并获取 childNodes，然后在使用计数器 c< 的同时继续循环遍历所有这些节点 如果它的长度与元素列表的长度相同，它也会将该 div 设置为 display:none。

 function mySearch() {
  var input, filter, ul, li, a, i, parentDivs, children;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("content");
  li = ul.getElementsByTagName('li');
  sect = ul.getElementsByTagName('section');
  parentDivs = document.getElementsByClassName("parent");
  children = document.getElementsByClassName("child");

  if (filter.length > 3) {
  console.log(filter.length);
    for (var x = 0; x < parentDivs.length; x++) {
            parentDivs[x].style.display = "";
    }
  }

  for (var p = 0; p < parentDivs.length; p++) {
    var c = 0;
    var nodes = parentDivs[p].childNodes[3].getElementsByTagName("li");
    for (var i = 0; i < nodes.length; i++) {

      var a = nodes[i].querySelectorAll("a");

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

    if (c === nodes.length) {
      parentDivs[p].style.display = "none";
    }
  }
}

这是一个包含我的答案的 JSfiddle https://jsfiddle.net/nq7Lfz1o/5/它使用 "TEXT" 作为过滤器而不是输入来显示解决方案。这还包括重置，以便您可以返回到在长度大于 3 时显示所有内容的状态。