Buscar dentro de un div con jQuery

Cómo buscar dentro de un div con jQuery

Hola.

Esta sería la segunda de tres entregas acerca de cómo integrar el scroll infinito con una búsqueda con Ajax.

Resulta que, una vez integrado el scroll infinito dentro de la aplicación web, el siguiente requerimiento que surgió fue el de buscar dentro del listado infinito con una caja de texto.

Lo primero que opté por hacer fue el de buscar con jQuery dentro del div, es decir filtrar los elementos de acuerdo a lo que se esté escribiendo.

En este post voy a describir cómo buscar con una caja de texto dentro de un div con jQuery .

El div con los elementos se ve así. Los elementos a filtrar tienen clase .elemento:

<div>
<div class="elemento">
<h3><span>1 </span><a>TITULO 1</a></h3>                          
<p>Calle descripción No. 646. Zona. Ciudad.</p>
</div>
<div class="elemento">
<h3><span>2 </span><a>TITULO 2</a></h3>                          
<p>Calle descripción No. 345. Zona. Ciudad.</p>
</div>
</div>

Elementos más, elementos menos. Ustedes saben que comprobando para más de uno se comprueba para todo.

1. Asocien una función javascript en el evento onkeyup de la caja de texto.

<input type="text" onkeyup="buscar(this);"  />

2. La función queda así:

function buscar(control) {
    $('.elemento').hide();
    var txt = $(control).val();  
    $('.elemento').each(function () {
        if ($(this).text().toLowerCase().indexOf(txt.toLowerCase()) != -1) {
            $(this).show();
        }
    });
}

Lo que hace es que cuando se está escribiendo en la caja de texto oculta todos los elementos de clase .elemento, luego compara la propiedad text de los elementos con el texto escrito y muestra los que coincidan.

En este ejemplo, la propiedad text del elemento va a permitir buscar dentro del texto de todos los elementos internos, es decir del h3, span, a y p.

Aquí dejo la liga a la implementación del scroll infinito con html pos si están interesados:

https://jmartinhc.blogspot.com/2019/02/implementar-scroll-infinito-con-javascript-html-asp-net-razor.html

Espero les sirva.