Oscurecer ventana y mostrar un loading mientras hace la búsqueda

[plitre_sys19]

Buenas noches, he visto en algunas páginas que cuando hacen las búsquedas aparce un loading, como puedo hacer para que cuando busque un registro en el proceso de buscar se oscurezca el fondo y salga un loading?, tengo pensado utilizar ajax en la parte de beforeSend pero si me pudieran dar una idea se lo agradecería.

[horusorion]

Hola buenos dias, te dare un ejemplo del codigo JQUERY:

Código Javascript:

$(document).ready(function(){
 
    //digamos que el id del formulario de busqueda se llama buscar entonces:
    $("#buscar").submit(function(e){
        //evitamos que se envie el formulario
        e.preventDefault();
 
        //mostramos el loader
        $("#loader").html("<img src='loader.gif'/>");
 
        //usamos el metodo $.ajax, $.get, $.post dependiendo el que te guste, yo lo hare con post
        $.post("buscar.php", {busqueda:palabra},function(data){
                //buscar.php: es la pagina donde esta la consulta y la que mostrara los resultados de la busqueda
                //busqueda : es como llamaras en php a la variable post $_POST['busqueda']
                //palabra: es lo que buscas, lo que introduces en el campo de busqueda
                //data: es la respuesta, lo que arrojo el archivo buscar.php
            //mostramos los resultados
            $("#resultados").html(data);
            //quitamos el loader
            $("#loader").html("");
        });
 
    });
 
});
 

Espero haberte podido ayudar... Saludos

[Alexis88]

Usar el método beforeSend está bien. Otra forma que puedes usar es mediante los métodos .ajaxStart() y .ajaxStop().

Código Javascript:

$(document).ajaxStart(function(){
    /* Oscureces el fondo y muestras el GIF de "Buscando..." */
}).ajaxStop(function(){
    /* Clarificas el fondo y ocultas el GIF de "Buscando..." */
});
 

Para mostrar/ocultar el GIF, tienes varios métodos, como .show() y .hide(), .fadeIn() y .fadeOut(), .toggle(), entre otros.

Saludos