如果所有子元素都被隐藏，则在搜索“隐藏父元素”时

Question

我创建了一个搜索框来搜索我的主容器中的所有链接。它隐藏与#search-box的输入不匹配的所有链接。问题在于每个.item都有一个h2标签，因此，当元素中的所有链接都被隐藏时，您只剩下看起来很俗气的h2标签。

HTML

  <input type="search" id="search-box" placeholder="Search...">

 <div id="mainContainer" class="column-container row">
   <div class="item column">
     <h2>Forms</h2>
     <a href="/examples/forms/simple-contact-form.phtml">Simple contact form - WIP</a>
     <a href="/examples/forms/online-payment-form-networkmerchants.phtml">Online payment form using Network Merchants - WIP</a>
     <a href="/examples/forms/form-with-attachment.phtml">Form with attachment</a>
    </div>
    <div class="item column">
      <h2>Videos</h2>
        <a href="/examples/videos/responsive-youtube-video.phtml">Responsive Youtube Video</a>
     </div>
     <div class="item column">
       <h2>Calendars</h2>
       <a href="/examples/calendars/show-few-events.phtml">Show Few Events</a>
       <a href="/examples/calendars/show-all-events.phtml">Show All Events</a>
     </div>
   </div>

JavaScript

searchBox = document.querySelector("#search-box");
contracts = document.querySelector(".examples");
var when = "keyup";

searchBox.addEventListener("keyup", function (e)
{
  //declare variables
  var text = e.target.value;
  var options = contracts.querySelectorAll('.item>a');

  //loop through all examples to find a match
  for(var i = 0; i < options.length; i++)
  {
    var option = options[i];
    var optionText = option.text;
    var lowerOptionText = optionText.toLowerCase();
    var lowerText = text.toLowerCase();
    var regex = new RegExp("^" + text, "i");
    var match = optionText.match(regex);
    var contains = lowerOptionText.indexOf(lowerText) != -1;

    //hide all content that doesn't match
    if(match || contains && text !== '')
    {
      option.style.display = 'block';
    }
    else
    {
      option.style.display = 'none';
    }
  }
});

如果所有a链接都被隐藏，如何修改javascript代码以隐藏父.item元素？

Answer 1

您可以遍历所有节并在每个节中找到链接元素。然后遍历该链接，并检查显示样式是否不是none。如果找到显示的任何链接，则应显示该部分，否则应将其隐藏。

let searchBox = document.querySelector("#search-box");
let contracts = document.querySelector("#mainContainer");
let when = "keyup";

searchBox.addEventListener("keyup", function (e) {
  let text = e.target.value;
  let options = contracts.querySelectorAll('.item > a');

  for (let i = 0; i < options.length; i++) {
    let option = options[i];
    let optionText = option.text;
    let lowerOptionText = optionText.toLowerCase();
    let lowerText = text.toLowerCase();
    let regex = new RegExp("^" + text, "i");
    let match = optionText.match(regex);
    let contains = lowerOptionText.indexOf(lowerText) != -1;

    if(match || contains && text !== '') {
      option.style.display = 'block';
    } else {
      option.style.display = 'none';
    }
  }
  
  // Hide sections when all links are hidden
  let sections = contracts.querySelectorAll('.item');
  for (let j = 0; j < sections.length; j++) {
    let anyLinkNotHidden = false;
    let links = sections[j].querySelectorAll('a');
    for (let k = 0; k < links.length; k++) {
      if (links[k].style.display != 'none') {
        anyLinkNotHidden = true;
      }
    }
    if (anyLinkNotHidden) {
      sections[j].style.display = 'block';
    } else {
      sections[j].style.display = 'none';
    }
  }
  
});

  <input type="search" id="search-box" placeholder="Search...">

 <div id="mainContainer" class="column-container row">
   <div class="item column">
     <h2>Forms</h2>
     <a href="/examples/forms/simple-contact-form.phtml">Simple contact form - WIP</a>
     <a href="/examples/forms/online-payment-form-networkmerchants.phtml">Online payment form using Network Merchants - WIP</a>
     <a href="/examples/forms/form-with-attachment.phtml">Form with attachment</a>
    </div>
    <div class="item column">
      <h2>Videos</h2>
        <a href="/examples/videos/responsive-youtube-video.phtml">Responsive Youtube Video</a>
     </div>
     <div class="item column">
       <h2>Calendars</h2>
       <a href="/examples/calendars/show-few-events.phtml">Show Few Events</a>
       <a href="/examples/calendars/show-all-events.phtml">Show All Events</a>
     </div>
   </div>