Filtro de búsqueda con Jquery

Question

// 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' ?

Answer 1

Revisando el código, veo que el problema con tu filtro en las categorías, se debe a que generas la validación cada ítem que coincide con tu búsqueda, por tal motivo solo te mostrara activadas las categorías que coinciden con tu ultimo registro validado.

Siguiendo tu lógica de validación, genere una cadena nueva donde concateno todas las categorías de tus ítems en donde realizabas la validación y después de el ciclo valido si contiene algo de información, para realizar la misma validación en los checkbox pero con toda la cadena.

Y para el adicional el enter se valida con un evento de keypress, puede ser un keydown, keyup, yo lo deje en este caso con keypress, y validas en los eventos que te manda el numero de carácter que se ingreso, en este caso para el Enter corresponde el 13.

function buscar() {
    var buscador = $('#buscador').val().toLowerCase();
    var not_found = true;
    var listCategory = '';
    $('.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;
            listCategory += ` ${category_products}`; 
            //Concateno todo lo que se vaya a mostrar en una sola variable y la valido al final.
        }
        else {
            $(this).parents('.producto').hide();
        }

        if (!not_found) {
            $('#text').hide();
        } else {
            $('#text').show();
            $('.btn-check').prop('checked', true);
        }

    });
    if (listCategory.length > 0) {//Aqui hare la validación de tus checkbox
        $('.btn-check').each(function () {
            var check = $(this).attr('category');
            if (listCategory.indexOf(check) !== -1) {
                $(this).prop('checked', true);
            } else {
                $(this).prop('checked', false);
            }
        });
    }
}
$('#buscador').on('keypress', function (e) {
    if (e.keyCode == 13) {
        buscar();
    }
});

// Buscador //
$('#button_search').on('click', function () {
    buscar();
});

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