1

Estoy haciendo un buscador con jQuery, en donde va filtrando según lo que escriba en un input. Esto funciona perfectamente, lo que necesito saber es como hacer una condición para que cuando no encuentre ningún resultado me muestre un texto en el div #noResults.

Mi código es el siguiente:

$(document).ready(function () {
  $('#txtBuscar').keyup(function () {
    var nombres = $('.titulo');
    var buscando = $(this).val();
    var item = '';
    for (var i = 0; i < nombres.length; i++) {
      item = $(nombres[i]).html().toLowerCase();
      for (var x = 0; x < item.length; x++) {
        if (buscando.length == 0 || item.indexOf(buscando) > -1) {
          $(nombres[i]).parents('.tarjetaGeneral').show();
        } else {
          $(nombres[i]).parents('.tarjetaGeneral').hide();
        }
      }
    }
  });
});

En donde:

  • #txtBuscar es el input donde escribo para buscar.
  • .titulo es el texto que está buscando según lo que escribo en el input.
  • .tarjetaGeneral es el contenedor que se va a ocultar o mostrar dependiendo de lo que está filtrando.
  • #noResults es la id del div donde se mostrará el mensaje "No se encontraron resultados".

Intenté hacer lo siguiente:

$(document).ready(function () {
  $('#txtBuscar').keyup(function () {
    var nombres = $('.titulo');
    var buscando = $(this).val();
    var item = '';
    for (var i = 0; i < nombres.length; i++) {
      item = $(nombres[i]).html().toLowerCase();
      for (var x = 0; x < item.length; x++) {
        if (buscando.length == 0 || item.indexOf(buscando) > -1) {
          $(nombres[i]).parents('.tarjetaGeneral').show();
          // limpiamos el contenido del div con la id "noResults"
          $('#noResults').text('');
        } else {
          $(nombres[i]).parents('.tarjetaGeneral').hide();
          //añadimos este texto al div con la id "noResults"
          $('#noResults').text('No se encontraron resultados');
        }
      }
    }
  });
});

Y este es mi resultado:

introducir la descripción de la imagen aquí

Como verán, cuando estoy filtrando algo, me muestra aún el mensaje, y lo que necesito es que cuando no filtra ningún resultado, recién me muestre el mensaje.

Les adjunto el código HTML:

<div class="col-lg-9">
  <div class="row">
    <div class="col-md-12 pb-4">
    <div class="d-flex">
      <input type="text" class="form-control w-100" placeholder="Buscar artículo." name="txtBuscar" id="txtBuscar" autocomplete="off" maxlength="60">
      <span></span>
    </div>
  </div>
</div>
<div class="row">
  <?php
  foreach ($result as $row) {
  ?>
  <div class="col-md-4 tarjetaGeneral">
    <div class="card mb-4 product-wap rounded-0">
      <div class="card rounded-0" style="width: 305px; height: 300px">
        <img class="card-img rounded-0 img-fluid" src="../files/articulos/<?php echo $row['imagen'] ?>">
        <div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
          <ul class="list-unstyled">
            <li><a class="btn btn-success text-white mt-2" href="shop-single.php"><i class="far fa-eye"></i></a></li>
          </ul>
        </div>
      </div>
      <div class="card-body">
        <a class="h3 text-decoration-none titulo"><strong><?php echo ucwords(strtolower($row['articulo'])) ?> - <?php echo ucwords(strtolower($row['categoria'])) ?></strong></a>
        <ul class="w-100 list-unstyled d-flex justify-content-between mb-1">
          <li>
          <span style="font-size: 11px; color: #a6a6a6;">Publicado por: <strong><?php echo $row['usuario'] ?></strong>.</span>
          </li>
          <li>
          <span style="font-size: 11px; color: #a6a6a6;">Fecha: <strong><?php $fecha = $row['fecha']; ?></strong></span>
          </li>
        </ul>
        <p class="text-center mb-0">S/. <?php echo $row['precio'] ?></p>
      </div>
    </div>
  </div>
  <?php
  }
  ?>
  <!-- Aquí se muestra el mesaje cuando no encuentre resultados -->
  <span id="noResults"></span>
  </div>
</div>

1 respuesta 1

1

Nota: Simplifiqué el html para que quedara mas claro

Solución ocupando jquery

Hay que colocar un if despúes del últimno for. Preguntas: La cantidad de elementos es igual a la cantidad de "elementos ocultos" ?? Para esto se ocupa el selector '.tarjetaGeneral:hidden'

$(document).ready(function () {
  $('#txtBuscar').keyup(function () {
    var nombres = $('.titulo');
    var buscando = $(this).val();
    for (var i = 0; i < nombres.length; i++) {
      item = $(nombres[i]).html().toLowerCase();
      for (var x = 0; x < item.length; x++) {
        if (buscando.length == 0 || item.indexOf(buscando) > -1)         {
          $(nombres[i]).parents('.tarjetaGeneral').show();
        } else {
          $(nombres[i]).parents('.tarjetaGeneral').hide();
        }
      }
    }
   if(nombres.length == $('.tarjetaGeneral:hidden').length){
        $('#noResults').show();
      }
      else{
      $('#noResults').hide();
      }
  });
});
#noResults{
 display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtBuscar" />
<div id="results">
    <div class="tarjetaGeneral">
       <div class="titulo">hola</div>
    </div>
    <div class="tarjetaGeneral" >
       <div class="titulo">holassss</div>
    </div>
    <div class="tarjetaGeneral">
       <div class="titulo">Titu</div>
    </div>
    <div class="tarjetaGeneral">
       <div class="titulo">Titulo</div>
    </div>
</div>
<span id="noResults">No se encontraron resultados</span>

Solución ocupando solo CSS

Es posible ocupar la pseudo clase has, que obviamente y no podia ser de otra manera, no funciona en firefox, pero si en los otros navegadores decentes. El truco es colocar style vacío al principio al div que queremos ocultar. Esto es porque jquery hace esto mismo con la función hide()

$(document).ready(function () {
  $('#txtBuscar').keyup(function () {
    var nombres = $('.titulo');
    var buscando = $(this).val();
    var item = '';
    for (var i = 0; i < nombres.length; i++) {
      item = $(nombres[i]).html().toLowerCase();
      for (var x = 0; x < item.length; x++) {
        if (buscando.length == 0 || item.indexOf(buscando) > -1) {
          $(nombres[i]).parents('.tarjetaGeneral').show();
        } else {
          $(nombres[i]).parents('.tarjetaGeneral').hide();
        }
      }
    }
  });
});
#results:not(:has(div[style=""])):after{
 content:"No se econtraron elemento"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtBuscar" />
<div id="results">
    <div class="tarjetaGeneral" style>
       <div class="titulo">hola</div>
    </div>
    <div class="tarjetaGeneral" style>
       <div class="titulo">holassss</div>
    </div>
    <div class="tarjetaGeneral" style>
       <div class="titulo">Titu</div>
    </div>
    <div class="tarjetaGeneral">
       <div class="titulo">Titulo</div>
    </div>
</div>

1
  • Me funcionó, gracias. Commented el 9 oct. 2022 a las 3:35

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.