// Buscador //
$('#button_search').on('click', function(){
var buscador = $('#buscador').val().toLowerCase();
var not_found = true;
$('.producto span').each(function(){
var name_products = $(this).text().toLowerCase();
if(name_products.indexOf(buscador) !== -1){
var category_products = $(this).parents('.producto').attr('category');
$(this).parents('.producto').show();
not_found = false;
$('.btn-check').each(function(){
var check = $(this).attr('category');
if(category_products.indexOf(check) !== -1){
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
});
}
else {
$(this).parents('.producto').hide();
}
if(!not_found){
$('#text').hide();
} else {
$('#text').show();
$('.btn-check').prop('checked', true);
}
});
});
// Casillas checkbox //
$('.btn-check').prop('checked', true);
$('#apply_filter').on('click', function(){
$('.producto').hide();
$('.btn-check:checked').each(function(){
var input_category = $(this).attr('category');
$('.producto[category*="'+input_category+'"]').show();
});
});
$('#all').on('click', function(){
if ($('#all').is(':checked')){
$('.btn-check:not(#all)').prop('checked', true);
} else if ($('#all').not(':checked')) {
$('.btn-check:not(#all)').prop('checked', false);
}
});
body{
display: flex;
}
.left-section{
width: 30%;
background: #cdcdcd;
}
.rigth-section{
width: 70%;
background: #ededed;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.producto{
width: 25%;
text-align: center;
background: #cdcdcd;
display: table;
}
img{
width: 100%;
}
#text{
font-size: 2vw;
position: relative;
padding: 25%;
display: none;
}
.category{
display: block;
}
.category input,
.category label{
cursor: pointer;
font-size: 1.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<aside class="left-section">
<input type="text" id="buscador" placeholder="Buscar moto..." maxlength="36">
<button id="button_search">Buscar</button>
<span class="category"><input type="checkbox" class="btn-check" id="all" category="all"><label for="all">All</label></span>
<span class="category"><input type="checkbox" class="btn-check" id="verde" category="verde"><label for="verde">moto de color verde</label></span>
<span class="category"><input type="checkbox" class="btn-check" id="rojo" category="rojo"><label for="rojo">moto de color rojo</label></span>
<span class="category"><input type="checkbox" class="btn-check" id="blanco" category="blanco"><label for="blanco">moto de color blanco</label></span>
<span class="category"><input type="checkbox" class="btn-check" id="gris" category="gris"><label for="gris">moto de color gris</label></span>
<span class="category"><input type="checkbox" class="btn-check" id="negro" category="negro"><label for="negro">moto de color negro</label></span>
<button id="apply_filter">Aplicar filtro</button>
</aside>
<aside class="rigth-section">
<div class="producto" category="all gris"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ninja-H2R.jpg"><span>Moto Rfa 2000</span></div>
<div class="producto" category="all verde"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ZX-10RR_g.jpg"><span>Sudora KFI</span></div>
<div class="producto" category="all blanco"><img src="https://as.com/betech/imagenes/2017/10/13/portada/1507918164_397427_1507918224_noticia_normal.jpg"><span>Z-moto 6000 turbo</span></div>
<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Hirasc 300k</span></div>
<div class="producto" category="all rojo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTt-wqMoSBYFaR6dIJE9a02yMmQJl6AUYrYnQ&usqp=CAU"><span>Az Mini-Inferno 10000</span></div>
<div class="producto" category="all gris"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAk-Q8UCYkf4YBLwh6QZr1yx-gB8mbn0Hh9Q&usqp=CAU"><span>Droma T legacy</span></div>
<div class="producto" category="all blanco"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRcHyCIrQoZjVqudofBdi_qh9wGiRJfdpbZxw&usqp=CAU"><span>KazaQ Op</span></div>
<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Marine T-5000</span></div>
<p id="text">No se encontraron resultados...</p>
</aside>
Hola a todos, tengo el siguiente filtro de busqueda, un input text que funciona como buscador y varios checkbox que funcionan como filtro de categoria, tengo dos problemas, espero me puedan ayudar, al buscar una moto, se activan las casillas que concuerdan con la categoría de la moto, pero no se activan todas, si yo presiono una tecla, por ejemplo la a, y doy en buscar, te aparecen todas las motos, cuyo nombre tengan una a, al lado izquierdo, solo se activan dos casillas y no todas las que son iguales a las motos que se están visualizando, como pueden ver, sólo se activan las casillas que dicen ALL y MOTO DE COLOR VERDE, pero no se activa las otras casillas. ¿Cómo puedo solucionar esto? - El otro problema, ¿Cómo hago para que busque una moto al presionar ENTER en el input text? , es decir, que funcione con el evento keypress al igual que con el on, 'click' ?