Scroll infinito y búsqueda Ajax con jQuery

Cómo integrar scroll infinito y una búsqueda Ajax con jQuery

Hola.

Aquí dejo la tercera y ultima entrega de la implementación del scroll infinito con una búsqueda Ajax con jQuery.

Como describí en el post anterior, una vez implementado el scroll infinito el requerimiento fue buscar dentro de los elementos del listado.

La solución del post "buscar dentro de un div con jQuery" no funcionó por mucho tiempo debido a que el scroll infinito va arrojando resultados por páginas, en mi caso 20 resultados por página. Haciendo ineficiente el buscar únicamente dentro de los elementos que han sido cargados en el div.

Así que la solución aquí es integrar el scroll infinito con una búsqueda Ajax. El reto es hacer la búsqueda sin afectar la funcionalidad del scroll infinito.

Con el scroll infinito integrado, se requiere asociar el evento onkeyup de una caja de texto al método Ajax de jQuery.

<script type="text/javascript">
    $(document).on('ready', function () {              
        var searchRequest = null;
        
            var minlength = 0; //si quieren un mínimo de caracteres para ejecutar la búsqueda
            $("#idcaja").keyup(function () {
                var that = this,
                value = $(this).val(); //el texto de la caja

                if (value.length >= minlength) {
                    if (searchRequest != null)
                        searchRequest.abort();
                        searchRequest = $.ajax({
                        type: "GET",
                        url: "/micontrolador/_Listado?v1=valor1",
                        data: { 
                            'v2': 'valor2',
                            'q': value
                        },
                        dataType: "text",
                        success: function (msg) {
                            //checar si el valor es el mismo
                            if (value == $(that).val()) {           
                                $(".lista").html($(msg).find(".elemento"));
                                var xhref = "/micontrolador/_Listado?v1=valor1&v2=valor2&p=2&q=" + value;
                                //seteando la liga que maneja el paginado del infiniteScroll
                                $('.numero-pagina').attr('href', xhref);
                                //destruir o no toma cambios                     
                                $('.listado').infiniteScroll('destroy');

                                //inicializar infiniteScroll nuevamente                                                               
                                $('.lista').infiniteScroll({
                                  path: '.numero-pagina',
                                  append: '.elemento',
                                  status: '.page-load-status',
                                  hideNav: '.numero-pagina',
                                });
                                
                            }
                        }
                    });
                }
            });
            
}); // fin on ready

Ahora que escribo esto veo que sí es importante que vean el primer post "Implementar scroll infinito con javascript y HTML en ASP.NET Razor" por la página dinámica, elementos y estilos que se usan en el código de arriba. Además se puede ver aquí cómo implementar el infiniteScroll con jQuery.

Podrán darse cuenta que esta integración a pesar de estar implementada con ASP.NET Razor no tiene ninguna dependencia con esta tecnología. El código puede adaptarse fácilmente a cualquier otro lenguaje de programación de servidor como php o cualquier otro.

PD. Aguas con los métodos del infiniteScroll, son sensibles a mayúsculas y minúsculas.


Espero les sirva.