¿Cómo adaptaría este código para mostrar <div>No Results Found</div> en la página cuando no se encuentran resultados?
Tengo esta galería de imágenes simple con una entrada para filtrar los resultados según el contenido del atributo data-filter :
<input type="text" name="filter" placeholder="Filter" id="filter"> <div class="results-gallery"> <div class="gallery-thumbnail" data-filter="Apple">image</div> <div class="gallery-thumbnail" data-filter="Orange">image</div> <div class="gallery-thumbnail" data-filter="Banana">image</div> </div>Y el jQuery:
$("#filter").keyup(function() { var value = $(this).val().toLowerCase(); $(".gallery-thumbnail").filter(function() { $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1); }); });Podrías usar el mismo método y hacerlo así:
$(document).ready( function(){ $("#filter").keyup( function(){ var value = $(this).val().toLowerCase(); $(".gallery-thumbnail").filter(function() { $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1); }); $('.noresult').toggle($(".gallery-thumbnail:visible").length == 0) }); });Manifestación
$(document).ready( function(){ $("#filter").keyup( function(){ var value = $(this).val().toLowerCase(); $(".gallery-thumbnail").filter(function() { $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1); }); $('.noresult').toggle($(".gallery-thumbnail:visible").length == 0) }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="filter" placeholder="Filter" id="filter"> <div class="results-gallery"> <div class="gallery-thumbnail" data-filter="Apple">image</div> <div class="gallery-thumbnail" data-filter="Orange">image</div> <div class="gallery-thumbnail" data-filter="Banana">image</div> <div class="noresult" style="display:none">No Results Found</div> </div>Pones el div 'Sin resultados' en la página, con una clase que inicialmente está oculta por defecto ( display:none ). Si su filtro no devuelve resultados, agrega una clase al div para mostrarlo ( display: block ). Cuando se borra el filtro y tiene resultados nuevamente, elimina la clase 'mostrar' y la revierte a su estado 'oculto' predeterminado.