I am making a search engine with jquery, where it filters according to what I write in an input. This works perfectly, what I need to know is how to make a condition so that when it doesn't find any results it shows me a text in the div #noResults
. My code is the following:
$(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();
}
}
}
});
});
Where:
#txtBuscar
is the input where I write to search..titulo
is the text it is looking for based on what I type in the input..tarjetaGeneral
is the container to hide or show depending on what you are filtering on.#noResults
is the id of the div where the "No results found" message will be displayed.
I tried to do the following:
$(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');
}
}
}
});
});
And this is my result:
As you can see, when I'm filtering something, it still shows me the message, and what I need is that when it doesn't filter any results, it shows me the message.
I attach the html code:
<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>
Note: I simplified the html to make it clearer
Solution using jquery
You have to put an if after the last for. Questions: The number of elements is equal to the number of "hidden elements" ?? The selector '.generalcard:hidden' is used for this
Solution using only CSS
It is possible to use the has pseudo class , which obviously and could not be otherwise, it does not work in firefox, but it does in other decent browsers. The trick is to put empty style at the beginning of the div we want to hide. This is because jquery does the same thing with the hide() function.