I am trying to implement a simple search box that will filter the titles <h3>
of each card
one that I have on my page.
The problem is that it only brings me results in text, and it hides the image that I have together with the class blog-inner
.
I think the problem is in the script
jQuery one.
At first I tried to apply the filter to the identifier #myDIV
and have it bring me the fields <h3>
and although it seemed to work leaving me the image, it only hid the other texts.
$("#myDIV h3").filter(function() {
I was also moving the search filter and the ID #myDIV
around to see if I could bring in my results what is contained within the modals by adding a global filter in the function *
, but that didn't work either.
I've been trying these snipets without much success
I accept modifications in the filter with Jquery or add another resource to get the result I want.
I will be very attentive, thanks!
I also have the code on CodePen
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
h3{
margin-bottom: 10px;
font-size: 20px;
}
.search{
padding: 50px 55px;
width: 100%;
}
.portfolio-modal {
margin-right: auto;
margin-left: auto;
border-radius: 6px;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
padding-left: 17px;
padding-top: 20px;
text-align: center;
width: 90%;
}
.portfolio-modal .modal-content h2 {
margin: 0;
}
.portfolio-modal .modal-content img {
margin-bottom: 30px;
}
.portfolio-modal .modal-content .item-details {
margin: 30px 0;
}
.portfolio-modal .close-modal {
position: absolute;
width: 45px;
height: 45px;
background-color: transparent;
top: 25px;
right: 45px;
cursor: pointer;
}
.portfolio-modal .close-modal:hover {
opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
height: 45px;
width: 1px;
margin-left: 35px;
background-color: #777;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
height: 45px;
width: 1px;
background-color: #777;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 1052;
}
.portfolio-modal .modal-backdrop {
opacity: 0;
display: none;
}
<head>
<meta charset="UTF-8">
<title>Titulo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' href='https://tarjetero.co/intranet/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://tarjetero.co/intranet/sm/css/style.css'>
</head>
<body>
<div id="fh5co-blog-section">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
<h2>Nuestras Sedes</h2>
</div>
</div>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
</div>
<!--INICIO MAPAS-->
<div class="container">
<div class="row">
<div class="search">
<input class="form-control" id="myInput" type="text" placeholder="Búsqueda.."></div>
<div id="myDIV">
<!--Mapa1-->
<div class="col-sm-4 text-center">
<div class="blog-inner">
<a href="#modal1" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
<div class="desc">
<h3><a href="#modal1" data-toggle="modal">Sede Colombia</a></h3>
</div>
</div>
</div>
<!--Mapa2-->
<div class="col-sm-4 text-center">
<div class="blog-inner">
<a href="#modal2" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
<div class="desc">
<h3><a href="#modal2" data-toggle="modal">Sede Seul</a></h3>
</div>
</div>
</div>
<!--Mapa3-->
<div class="col-sm-4 text-center">
<div class="blog-inner">
<a href="#modal3" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
<div class="desc">
<h3><a href="#modal3" data-toggle="modal">Sede Japón</a></h3>
</div>
</div>
</div>
<!--Mapa4-->
<div class="col-sm-4 text-center">
<div class="blog-inner">
<a href="#modal4" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
<div class="desc">
<h3><a href="#modal4" data-toggle="modal">Oficinas India</a></h3>
</div>
</div>
</div>
<!--Mapa5-->
<div class="col-sm-4 text-center">
<div class="blog-inner">
<a href="#modal5" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
<div class="desc">
<h3><a href="#modal5" data-toggle="modal">Planta Irlanda</a></h3>
</div>
</div>
</div>
<!--Mapa6-->
<div class="col-sm-4 text-center">
<div class="blog-inner">
<a href="#modal6" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
<div class="desc">
<h3><a href="#modal6" data-toggle="modal">Planta Hawai</a></h3>
</div>
</div>
</div>
</div><!--row-->
</div>
<!-------------------------------------------->
<!-- Modal 1-->
<div class="portfolio-modal modal fade" id="modal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Sede Principal Colombia</h2>
<hr><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728"
width="800" height="400" frameborder="0" style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
<br><br><hr>
<p><b>Dirección:</b> Bogotá - Colombia
<br>
<b>Teléfonos:</b> (2) 123 4567
</p>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2-->
<div class="portfolio-modal modal fade" id="modal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Sede Administrativa Seul</h2>
<hr><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728"
width="800" height="400" frameborder="0" style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
<br><br><hr>
<p><b>Dirección:</b> Seul - Corea del Sur
<br>
<b>Teléfonos:</b> (2) 123 4567
</p>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 3-->
<div class="portfolio-modal modal fade" id="modal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Sede Operativa Japon</h2>
<hr><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728"
width="800" height="400" frameborder="0" style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
<br><br><hr>
<p><b>Dirección:</b> Tokio, Japón
<br>
<b>Teléfonos:</b> (2) 123 4567
</p>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 4-->
<div class="portfolio-modal modal fade" id="modal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Oficinas India</h2>
<hr><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728"
width="800" height="400" frameborder="0" style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
<br><br><hr>
<p><b>Dirección:</b> Nueva Delhi, India
<br>
<b>Teléfonos:</b> (2) 123 4567
</p>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 5-->
<div class="portfolio-modal modal fade" id="modal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Planta Irlanda</h2>
<hr><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728"
width="800" height="400" frameborder="0" style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
<br><br><hr>
<p><b>Dirección:</b> Dublín, Irlanda
<br>
<b>Teléfonos:</b> (2) 123 4567
</p>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 6-->
<div class="portfolio-modal modal fade" id="modal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Planta Hawai</h2>
<hr><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728"
width="800" height="400" frameborder="0" style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
<br><br><hr>
<p><b>Dirección:</b> Honolulu - Hawai
<br>
<b>Teléfonos:</b> (2) 123 4567
</p>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
Since the image and the text are inside the
div.blog-inner
use that class instead of the universal selector*
and so the filter shows everything: