猫头鹰轮播jQuery搜索过滤器

Question

我目前正在尝试使用带有多个填充文本框的滚动轮播。问题是，当我使用搜索栏过滤下面的轮播框时，它只会删除文本，而不会删除包括div在内的整个框。 Please check this image on the left to see what i am working with Another picture

jQuery(document).ready(function($){

$('.box h4').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});

$('.js-search').on('keyup', function(){

var searchTerm = $(this).val().toLowerCase();

    $('.box h4').each(function(){

        if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
            $(this).show();
        } else {
            $(this).hide();
        }

    });

});

});

.owl-item > div {
  cursor: pointer;
  transition: margin 0.4s ease;
}
.owl-item.center > div:hover {
  cursor: pointer;
  margin: 0;
}
.owl-item:not(.center) > div:hover {
}
.box {
  background-color: #343639;
  width: 95%;
  height: 250px;
  padding: 20px;
  text-align: center;
  border-bottom: 5px solid #D41068;
}
.box h4 {
	position: relative;
	top: 80px;
color: white;
font-family: Helvetica;
font-size: 18px;
	z-index: 1;
transition: top .5s ease;
}
.box:hover h4 {
	top: 10px;
}

.box:hover {
	background-color: #D41068;
}

.container2 {
	margin-top: 15%;
}

.services-button {
	text-align: center;
	background-color: #343639;
	border: none;
	color: white;
	font-size: 14px;
	border-radius: 0px;
	padding: 10px;
	position: absolute;
	top: 45%;
	right: 27%;
	opacity: 0;
	transition: opacity .35s ease;
	width: 120px;
}

.keycontacts-button {
	text-align: center;
	background-color: #343639;
	border: none;
	color: white;
	font-size: 14px;
	border-radius: 0px;
	padding: 10px;
	position: absolute;
	top: 65%;
	right: 27%;
	opacity: 0;
	transition: opacity .35s ease;
	width: 120px;
}

.box:hover .services-button {
	opacity: 1;
	
}
.box:hover .keycontacts-button {
	opacity: 1;
}
.fa-chevron-left {
	transform: scale(5);
	color: #d41068;
	position: relative;
	bottom: 130px;
}
.fa-chevron-right {
	transform: scale(5);
	color: #d41068;
	position: relative;
	bottom: 130px;
	left: 1150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<div class="search-title">
		<h3 class="search-h3">I am looking for help with...</h3>
		</div>
		<div class="searchcontainer">
  <input placeholder="Search..." class='js-search' type="text" onkeyup="searchResults()">
  <i class="fa fa-search"></i>
</div>
<div class="container2">
  <div class="owl-carousel">
    <div class="box">
		<h4>Commercial Law</h4>
		<button class="services-button">Read More</button>
		<button class="keycontacts-button">Key Contacts</button>
	  </div>
    <div class="box">
		<h4>Litigation &amp; Dispute Resolution</h4>
		<button class="services-button">Read More</button>
		<button class="keycontacts-button">Key Contacts</button>
	  </div>
    <div class="box">
		<h4>Employment</h4>
		<button class="services-button">Read More</button>
		<button class="keycontacts-button">Key Contacts</button>
	  </div>
    <div class="box">
		<h4>Intellectual Property</h4>
		<button class="services-button">Read More</button>
		<button class="keycontacts-button">Key Contacts</button>
	  </div>
    <div class="box">
		<h4>Information Technology</h4>
		<button class="services-button">Read More</button>
		<button class="keycontacts-button">Key Contacts</button>
	  </div>
    <div class="box">
		<h4>Regulatory Investigations &amp; Defence</h4>
		<button class="services-button">Read More</button>
		<button class="keycontacts-button">Key Contacts</button>
	  </div>
    <div class="box">
		<h4>Commercial Property</h4>
	    <button class="services-button">Read More</button>
		<button class="keycontacts-button">Key Contacts</button>
	  </div>
  </div>
</div>