Question

所以我试图在一个页面上创建一个搜索功能，该页面填充了分成不同部分的链接，以便人们通过消除所有不属于的所有信息，更容易找到他们正在寻找的特定链接他们正在寻找什么。

我希望搜索功能将不匹配搜索参数的元素更改为＆＃34; display：none;＆＃34;但我似乎无法弄清楚如何制作一个列表项目为＆＃34; display：none;＆＃34;同时＆＃34;显示：无;＆＃34;如果它不包含搜索参数，则该部分不再出现。

这是我的代码：

<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，则显示。

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

1 个答案: