1

este input #busqueda realiza la busqueda del valor en mi base de datos de mi base de datos jalo una linea Como los Rows que muestro en #resultado:

Yo quiero que al cargar la pagina: Me cargue los ultimos 10 resultados creados, eso ya lo ordeno en el Mysql con las condiciones ORDERBY. Ahora, cuando yo inicio la web obviamente no me muestra ningun resultado, ya que no ejecuto el jquery que se activa al darle click en el input submit. Mi problema esta unicamente en el JQUERY que no logro condicionarlo que: Ejecute al cargar la web y que ademas realice la busqueda cuando obtenga el valor y le de click en submit.

Aclaro que soy Novato en JQUERY, llevo mas de 6 horas en san google, no recurriria a uds si no lo hubiese buscado ni me haya esforzado, muchas gracias, los estaré leyendo.

*NOTESE QUE YA HABIA CONDICIONADO SI ESTUVIESE NULL #busqueda precargaba la pagina, mas no realizaba la busqueda.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
        var consulta;
         //hacemos focus al campo de búsqueda
        $("#busqueda").focus();

        //comprobamos si se pulsa una tecla
        $("#buscar").click(function(e){

              //obtenemos el texto introducido en el campo de búsqueda
              $("#buscar").click(consulta = $("#busqueda").val());

              //hace la búsqueda
              $.ajax({
                    type: "POST",
                    url: "buscar.php",
                    data: "b="+consulta,
                    dataType: "html",
                    beforeSend: function(){
                          //imagen de carga
                          $("#resultado").html("<p align='center'><img src='ajax-loader.gif' /></p>");
                    },
                    error: function(){
                          alert("error petición ajax");
                    },
                    success: function(data){
                          $("#resultado").empty();
                          $("#resultado").append(data);

                    }
              });
        });
});
  </script>
<input type="text" name="" id="busqueda" value="">
  <input type="submit" name="" id="buscar">
  <div id="resultado">
<div class="row">
<div class="cols">SUPUESTO ID 001</div>
<div class="cols">DESCRIPCION PRECARGADO IMAGINARIAMENTE 001</div>
<div class="cols">PRECIO PRECARGADO IMAGINARIAMENTE 001</div>
</div>
<div class="row">
<div class="cols">SUPUESTO ID 002</div>
<div class="cols">SUPUESTA DESCRIPCION 002</div>
<div class="cols">SUPUESTO PRECIO 002</div>
</div>
</div>

2 respuestas 2

1

Hola @Marco mi recomendación es que hagas una función con esto a la cual le pasarás como parámetro la consulta por lo tanto algo como

function getResultado(consulta){

 $.ajax({
  url: '',
  method: 'post',
  data:{b : consulta},
  beforeSend... (todo lo demás)
 })

}

Esta función la colocas fuera del document ready y la llamas en tu .click del input buscar.

$('#buscar').click(function(e){
 //Esto sirve para que no realicé ninguna acción predeterminada
 e.preventDefault();

 //Tomas el valor de la búsqueda
 var b = $('#busqueda').val();

 //ahora llamas a la función y le pasas la consulta.
 getResultado(b);
})

Ahora, sobre el tema de que quieres que al inicio muestre los últimos 10 resultados cargados, no veo necesario que tengas que utilizar la misma función que la de generar la búsqueda, podrías realizar otra y ejecutarla solamente una vez en el document ready o si estás utilizando PHP, llevar los datos directamente desde el servidor.

1
  • Probé tu ejemplo, pero no soluciona a mi pregunta. Estoy tratando de hacer algo parecido a un buscador de datos el 26 mar. 2018 a las 15:04
0

puedes hacerlo asi:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
        //hacemos focus al campo de búsqueda
        $("#busqueda").focus();

          function buscar(consulta){          
              //hace la búsqueda
              $.ajax({
                    type: "POST",
                    url: "buscar.php",
                    data: "b="+consulta,
                    dataType: "html",
                    beforeSend: function(){
                          //imagen de carga
                  $("#resultado").html("<p align='center'><img src='ajax-loader.gif' /></p>");
                    },
                    error: function(){
                          alert("error petición ajax");
                    },
                    success: function(data){
                          $("#resultado").empty();
                          $("#resultado").append(data);

                    }
              });
           }

        //comprobamos si se pulsa una tecla
        $("#buscar").click(function(e){
           e.preventDefault();
          //obtenemos el texto introducido en el campo de búsqueda
          let consulta = $("#busqueda").val();
          //llamamos a buscar y le pasamos el texto
          buscar(consulta);
        });

  // buscamos el texto javascript apenas entra a la pagina
  buscar("javascript");
});
  </script>
<input type="text" name="" id="busqueda" value="">
  <input type="submit" name="" id="buscar">
  <div id="resultado">
<div class="row">
<div class="cols">SUPUESTO ID 001</div>
<div class="cols">DESCRIPCION PRECARGADO IMAGINARIAMENTE 001</div>
<div class="cols">PRECIO PRECARGADO IMAGINARIAMENTE 001</div>
</div>
<div class="row">
<div class="cols">SUPUESTO ID 002</div>
<div class="cols">SUPUESTA DESCRIPCION 002</div>
<div class="cols">SUPUESTO PRECIO 002</div>
</div>
</div>

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.