消除与搜索参数不匹配的元素的自定义 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。