¿Como puedo optimizar este código? Necesito algo simple, pero para conseguir el resultado que quería he tenido que usar demasiado código.
Basicamente...
1- Tengo un input de texto donde el usuario puede introducir el nombre del producto a buscar en la tienda.
2- Por defecto todos los productos son visibles, al introducir una letra... p
por ejemplo quiero de desaparezcan todos los productos (.product-wrap
) que no contengan dicha letra en su nombre (.title
).
3- El paso anterior esta logrado con exito... Pero no quiero que desaparezcan del DOM de repente si no con un efecto de fade
... Tanto al aparecer, como al desaparecer. En caso de que borre la p
deben aparecer todos de nuevo con fade
.
4- Si no hay ningun producto que contenga dicho texto... abajo veis que muestro u oculto una alerta (#no-results-alert
). Como puedo hacer para que esto funcione con fade... Ya que :visible
no me vale...
// Search Filter Button
$("#search").on("input", function() {
var value = $(this).val().toLowerCase();
$(".product-wrap").filter(function() {
//Esto funciona... Pero sin animacion, apareciendo y desap. bruscamente
//$(this).toggle($(this).find(".title").text().toLowerCase().indexOf(value) > -1)
//Esto funciona correctamente... Pero necesito optimizar esto al maximo...
if($(this).find(".title").text().toLowerCase().indexOf(value) > -1){
$(this).addClass('fadeIn')
if($(this).hasClass('fadeOut')){
$(this).removeClass('fadeOut');
}
}else{
$(this).addClass('fadeOut')
if($(this).hasClass('fadeIn')){
$(this).removeClass('fadeIn');
}
}
});
// Al hacer fadeIn y fadeOut... No puedo detectar que no quede ningun elemento...
if($(".product-wrap:visible").length == 0){
$("#no-results-alert").show();
}else{
$("#no-results-alert").hide();
}
});
.product-wrap{
background: #ddd;
border: 1px solid black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-12 col-md-6">
<input id="search" class="form-control" type="text" placeholder="Search" />
</div>
<div class="row d-flex flex-wrap">
<div class="product-wrap animated fadeIn col-12 col-sm-6 col-md-4 col-lg-3 my-2">
<!--CODE CODE AND MORE CODE..--->
<h3 class="title">Producto 1</h3>
</div>
<div class="product-wrap animated fadeIn col-12 col-sm-6 col-md-4 col-lg-3 my-2">
<!--CODE CODE AND MORE CODE..--->
<h3 class="title">Producto 2</h3>
</div>
<div class="product-wrap animated fadeIn col-12 col-sm-6 col-md-4 col-lg-3 my-2">
<!--CODE CODE AND MORE CODE..--->
<h3 class="title">Producto 3</h3>
</div>
<div class="product-wrap animated fadeIn col-12 col-sm-6 col-md-4 col-lg-3 my-2">
<!--CODE CODE AND MORE CODE..--->
<h3 class="title">Producto 4</h3>
</div>
</div>
PROBLEMAS
- :visible no funciona, ya que fade juega con la opacidad...
- Si buscamos el 4, este no se mueve a la posicion del 1... se queda en la suya... esto no lo quiero... Un hide, show al final de la animacion serviria creo...
- Optimizacion, necesaria. Uso demasiados condicionales para lo que creo que hace falta.