Сова Карусель jQuery Фильтр Поиска - PullRequest
Новая
       11

Сова Карусель jQuery Фильтр Поиска

0 голосов
/ 20 ноября 2018

В настоящее время я пытаюсь использовать прокручиваемую карусель с несколькими полями, заполненными текстом.Проблема заключается в том, что когда я использую панель поиска для фильтрации полей карусели ниже, она удаляет только текст, а не весь блок, включая div. Пожалуйста, проверьте это изображение слева, чтобы увидеть, с чем я работаю Другая картинка 

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>
...