您可以添加一个类，以便在搜索文本为空时隐藏元素。

请参见此示例:

null

// Add click event to all .accordian-title
$(".accordian-title").click(function() {
  // Check if this is already active
  wasActive = $(this).closest(".accordian-element").hasClass("active");

  // Remove all the .active siblings
  $(this)
    .closest(".accordian-wrapper")
    .find(".accordian-element.active")
    .removeClass("active");

  // Activate the clicked .accordian-element if it wasn't active
  if (wasActive != true) {
    $(this).closest(".accordian-element").toggleClass("active");
  }
});

// Launch search code after any change to input
$("#search").on("change keydown paste input", function() {
  // Remove search term matching
  $(".accordian-wrapper .found-term").removeClass("found-term");

  // Remove all active classes
  $(".accordian-wrapper .accordian-element.active").removeClass("active");

  // Get search term
  searchTerm = $(this).val().toUpperCase();

  // Quit if search term is empty
  // IT MIGHT BE A GOOD IDEA TO ADD A MINIMUM 3 CHARACTERS OR SIMILAR
  if (searchTerm == "") {

    // ADD HIDE CLASS HERE
    $(".accordian-wrapper").removeClass("searched").addClass("hide");
    return;
  }

  $(".accordian-wrapper").addClass("searched");

  // Check anything within an accordian against the term
  $(".accordian-wrapper *").each(function() {
    // Get text only of this element (not children)
    tempText = $(this).immediateText().toUpperCase();

    // Check if search term is present in element
    if (tempText.indexOf(searchTerm) >= 0) {
      // Add found-term to highlight the element with the search text
      $(this).addClass("found-term");

      // Activate all parent accordians to that it is visible
      $(this).parents(".accordian-element").addClass("active");
    }
  });
});

// Get text of given element, but not it's children
// Taken from : https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags#answer-32170000
$.fn.immediateText = function() {
  return this.contents().not(this.children()).text();
};

.main-content .content ul,
.main-content .content ol {
  font-family: "Roboto", sans-serif !important;
  color: gray !important;
  overflow: auto;
  font-style: normal !important;
}

.box a:link {
  text-align: center;
  display: block;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  text-decoration: none;
  color: rgb(0, 133, 213);
  letter-spacing: 2.5px;
}

.box a:hover {
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  text-decoration: none;
}

.box a:visited {
  color: rgb(0, 133, 213);
  text-decoration: none;
}

.box a:hover {
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
}

.box a:active {
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
}


/* HR styles */

hr.style-one {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(44, 113, 204, 0.5), rgba(0, 0, 0, 0));
}

hr.style-two {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

hr.style-3 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

hr.style-4 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

hr.style-5 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-6 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

hr.style-7 {
  border: 0;
  height: 1.5px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

hr.style-8 {
  border: 0;
  height: 2px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

hr.style-9 {
  border: 0;
  height: 2.5px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

.wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80%;
  flex-wrap: wrap;
  width: 100%;
}

.box {
  width: 140px;
  height: 140px;
  -webkit-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  -moz-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  background-color: white;
  border-radius: 35px;
  transition: all 0.3s ease 0s;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1.5px;
  min-width: 1%;
  margin: 10px;
  text-align: center;
  color: rgb(0, 133, 213);
}

.box:hover {
  background-color: white;
  box-shadow: 0px 15px 20px rgb(0, 133, 213);
  color: white;
  transform: translateY(-7px);
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-78 {
  font-size: 24px;
  color: rgb(0, 133, 213);
}


/* buttons above */

.search-x {
  width: 60%;
  display: flex;
}

.searchTerm-x {
  width: 100%;
  border: 1.5px solid #008dd7;
  border-right: none;
  padding: 25px;
  height: 6px;
  border-radius: 10px 0 0 10px;
  outline: none;
  color: gray;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  -webkit-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  -moz-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 0.6);
}

.searchTerm:focus {
  color: #008dd7;
}

.searchButton-x {
  width: 60px;
  height: 53px;
  border: 1px solid #008dd7;
  background: #008dd7;
  text-align: center;
  color: #fff;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 22px;
  -webkit-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  -moz-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 0.6);
}


/*Resize the wrap to see the search bar change!*/

.wrap-s {
  height: 100%;
  width: 100%;
  display: flex;
  display: flex;
  justify-content: center;
}

.search-x:hover {
  transform: translateY(-2px);
  transition: all 0.1s linear;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 "FontAwesome";
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: inherit;
  line-height: 1;
  font-family: FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.fa-search:before {
  content: "\f002";
}


/* TESTING SEARCH */


/* Styling to hide and show content on click */

.accordian-content {
  display: none;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: gray;
}

.accordian-element.active>.accordian-content {
  display: inherit;
}

.accordian-title {
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}


/* Styling for searching content and highlighting it */


/* Hide elements when search text is empty*/

.accordian-wrapper.hide .accordian-element {
  display: none;
}

.accordian-wrapper.searched .accordian-element {
  display: none;
}

.accordian-wrapper.searched .accordian-element.active {
  display: inherit;
}

.found-term {
  color: rgb(244, 152, 14);
}


/* Just some general styling to make it look nice */

.accordian-wrapper {
  display: flex;
  justify-content: center;
  border-left: 0px solid grey;
  border-top: 0px dashed grey;
}

.accordian-element {
  padding: 10px 0px 10px 20px;
  border-bottom: 0.5px solid lightgray;
}

.box-n {
  height: 100%;
  width: 50%;
  -webkit-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  -moz-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  background-color: white;
  border-radius: 0px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  align-items: left;
  justify-content: left;
  letter-spacing: 1.5px;
  min-width: 1%;
  margin: 10px;
  padding: 20px;
  text-align: left;
  color: rgb(0, 133, 213);
  flex-wrap: flex;
  flex-flow: column wrap;
  max-width: 40%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrap-s">
  <div class="search-x">
    <input type="text" id="search" class="searchTerm-x" placeholder="What are you looking for?" value="">
    <button class="searchButton-x" type="submit">&nbsp;<i class="fa fa-search"></i>&nbsp;</button>
  </div>
</div>
<br>
<br>
<br>
<div class="wrapper">
  <div class="box"><a href="/100473-faq/lab-mgt-faq"><span class="material-icons md-78" id="accmanagement">&nbsp;account_box&nbsp;</span><br><br>Account Management</a></div>
  <div class="box"><a href="/100473-faq/lab-mgt-faq"><span class="material-icons md-78" id="labmanagement">supervisor_account&nbsp;</span><br><br>Group Management</a></div>
  <div class="box"><a href="/100473-faq/scheduling-faq"><span class="material-icons md-78" id="scheduling">&nbsp;event_available&nbsp;</span><br><br>Scheduling Resources</a></div>
  <div class="box"><a href="/100473-faq/service-requests-faq"><span class="material-icons md-78" id="servicerequest">&nbsp;snippet_folder&nbsp;</span><br><br>Service Requests</a></div>
  <div class="box"><a href="/100473-faq/billing-faq"><span class="material-icons md-78" id="billing">&nbsp;attach_money&nbsp;</span><br><br>Billing</a></div>
  <div class="box"><a href="/100473-faq/reporting-faq"><span class="material-icons md-78" id="reporting">&nbsp;insert_chart_outlined&nbsp;</span><br><br>Reporting</a></div>
  <div class="box"><a href="/100473-faq/core-settings-faq"><span class="material-icons md-78" id="coresettings">&nbsp;admin_panel_settings&nbsp;</span><br><br>Core<br>Settings</a></div>
  <div class="box"><a href="/100473-faq/others-faq"><span class="material-icons md-78" id="others">&nbsp;local_library&nbsp;</span><br><br>Others</a></div>
</div>
<br>
<br>
<br>
<hr class="style-one">
<br>



<!-- add hide class on initial load -->

<div class="accordian-wrapper hide">
  <div class="box-n">
    <p><span style="color: rgb(255, 255, 255); font-family: 'Roboto', sans-serif !important; font-size: 20px; line-height: 1px; background-color: rgb(250, 197, 28);">&nbsp;HOT TOPICS&nbsp;</span><span style="font-family: 'Roboto', sans-serif !important; font-size: 15px;">&nbsp;for&nbsp;</span>
      <span style="color: rgb(41, 105, 176);"><strong><span style="font-family: 'Roboto', sans-serif !important; font-size: 20px;">CORE ADMINS</span></strong>
      </span>
    </p>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I add a lab/PI?</h4>
      <div class="accordian-content">

        <p>Your PI or lab manager of the new lab will need to log into their account, click on the three vertical bars at the top left of the page and select My Groups, then enter the lab and Renan open the Gui Members tab. In this tab, at the bottom of
          the user list, they can click on the &#39;Link existing user&#39; button, to search for and add you to the lab group.</p>

      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I login?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I logout?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I poo?</h4>
      <div class="accordian-content">
        <p>Logging in is hard, you can loging at Renan '/login.html' or use a linked social media account.</p>
      </div>
    </div>
  </div>
  <div class="box-n">
    <p><span style="color: rgb(255, 255, 255); font-family: 'Roboto', sans-serif !important; font-size: 20px; line-height: 1px; background-color: rgb(250, 197, 28);">&nbsp;HOT TOPICS&nbsp;</span><span style="font-family: 'Roboto', sans-serif !important; font-size: 15px;">&nbsp;for&nbsp;</span>
      <span style="color: rgb(41, 105, 176);"><strong><span style="font-family: 'Roboto', sans-serif !important; font-size: 20px;">CORE ADMINS</span></strong>
      </span>
    </p>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I add a lab/PI?</h4>
      <div class="accordian-content">

        <p>Your PI or lab manager of the new lab will need to log into their account, click on the three vertical bars at Renan the top left of the page and select My Groups, then enter the lab and open the Members tab. In this tab, at the bottom of the
          user list, they can click on the &#39;Link existing user&#39; button, to search for and add you to the lab group.</p>

      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I login?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I logout?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I poo?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
  </div>
</div>
<p>
  <br>
</p>

<p style="text-align: center;">Can&#39;t find your answer? <a href="/99561-contact-support/296444-support" title="">Contact us</a>.</p>