1

('#button_search').on('click', function(){

var buscador = $('#buscador').val().toLowerCase();

$('.producto span').each(function(){

var name_products = $(this).text().toLowerCase();

if(name_products.indexOf(buscador) !== -1){

$(this).parents('.producto').show();
$('#text').hide();
} else {
 $(this).parents('.producto').hide();
 $('#text').show();
}

}); 
});
body{
display: flex;
}
.section_one{
width: 30%;
background: #cdcdcd;
}
.section_two{
width: 70%;
background: #ededed;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.producto{
width: 25%;
text-align: center;
background: #cdcdcd;
display: block;
}
.producto img{
width: 100%;
}
#text{
font-size: 2vw;
padding: 25%;
display: none;
}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<aside class="section_one">
    <input type="text" id="buscador" placeholder="Buscar moto..." maxlength="36">
    <button id="button_search">Buscar</button>
</aside>

<aside class="section_two">

<div class="producto"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ninja-H2R.jpg"><span>Moto Rfa 2000</span></div>

<div class="producto"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ZX-10RR_g.jpg"><span>Sudora KFI</span></div>

<div class="producto"><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"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Hirasc 300k</span></div>

<div class="producto"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTt-wqMoSBYFaR6dIJE9a02yMmQJl6AUYrYnQ&usqp=CAU"><span>Az Mini-Inferno 10000</span></div>

<div class="producto"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAk-Q8UCYkf4YBLwh6QZr1yx-gB8mbn0Hh9Q&usqp=CAU"><span>Droma T legacy</span></div>

<div class="producto"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRcHyCIrQoZjVqudofBdi_qh9wGiRJfdpbZxw&usqp=CAU"><span>KazaQ Op</span></div>

<div class="producto"><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 este buscador interno simple que busca diferentes productos, en este caso motos, tengo un problema que cuando el valor del input type="text" no es igual al nombre de alguna moto o letra que lleve esta, me muestre la etiqueta p con id text. He intentado agregando una funcion show y hide para las condicionales dentro del each pero cuando se muestra una moto, se muestra el texto de no encontrado. ¿Cómo hago para que el texto se muestre sólo cuando la búsqueda no coincide con ningún nombre ni letra de la moto?

2
  • en tu ejemplo no muestra ese error el 15 oct. 2020 a las 11:17
  • Listo, edite la pregunte, ahora al buscar una moto, aparece la etiqueta p, cosa que no debe suceder. Solo debe pasar cuando no encuentre ninguna moto
    – Husdady
    el 15 oct. 2020 a las 19:24

1 respuesta 1

1

Puedes hacerlo de la siguiente manera. Tener una variable local que controle si hay motos con esa búsqueda. Y cuando en el each se encuentre una moto con esa búsqueda se pondrá a true y así se sabrá que hay datos encontrados.

En caso contrario, la variable permanecerá false y se sabrá que no hay resultado, por lo tanto, se muestra el mensaje.

Y cada vez que se clique se oculta el mensaje.

$('#button_search').on('click', function() {
    $('#text').hide();
  var buscador = $('#buscador').val().toLowerCase();
    var hayMotos = false;
  $('.producto span').each(function() {
    var name_products = $(this).text().toLowerCase();
    if (name_products.indexOf(buscador) !== -1) {
      $(this).parents('.producto').show();
      hayMotos = true;
    } else {
      $(this).parents('.producto').hide();
    }
  });
  
  if (!hayMotos) {
    $('#text').show();
  }
});
body {
  display: flex;
}

.section_one {
  width: 30%;
  background: #cdcdcd;
}

.section_two {
  width: 70%;
  background: #ededed;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.producto {
  width: 25%;
  text-align: center;
  background: #cdcdcd;
  display: block;
}

.producto img {
  width: 100%;
}

#text {
  font-size: 2vw;
  padding: 25%;
  display: none;
}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<aside class="section_one">
    <input type="text" id="buscador" placeholder="Buscar moto..." maxlength="36">
    <button id="button_search">Buscar</button>
</aside>

<aside class="section_two">

<div class="producto"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ninja-H2R.jpg"><span>Moto Rfa 2000</span></div>

<div class="producto"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ZX-10RR_g.jpg"><span>Sudora KFI</span></div>

<div class="producto"><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"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Hirasc 300k</span></div>

<div class="producto"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTt-wqMoSBYFaR6dIJE9a02yMmQJl6AUYrYnQ&usqp=CAU"><span>Az Mini-Inferno 10000</span></div>

<div class="producto"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAk-Q8UCYkf4YBLwh6QZr1yx-gB8mbn0Hh9Q&usqp=CAU"><span>Droma T legacy</span></div>

<div class="producto"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRcHyCIrQoZjVqudofBdi_qh9wGiRJfdpbZxw&usqp=CAU"><span>KazaQ Op</span></div>

<div class="producto"><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>

1
  • Gracias ! funciona correctamente !
    – Husdady
    el 15 oct. 2020 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.