Buscador instantaneo con PHP MySQL y jQuery

Este código nos permite crear un buscador intantaneo para nuesta página web, el código es sl siguiente.

HTML


jQuery

$(document).ready(function(){
                                
        var consulta;
                                                                          
         //hacemos focus al campo de búsqueda
        $("#busqueda").focus();
                                                                                                    
        //comprobamos si se pulsa una tecla
        $("#busqueda").keyup(function(e){
                                     
              //obtenemos el texto introducido en el campo de búsqueda
              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("

"); }, error: function(){alert("error petición ajax");}, success: function(data){ $("#resultado").empty(); $("#resultado").append(data); } }); }); }); ?>

PHP buscar.php

".$b."'.";
						}else{
									while($row=mysql_fetch_array($sql)){
												$nombre = $row['nombre'];
												$id = $row['id'];
												 
												echo $id." - ".$nombre."

"; } } } ?>

Código para mostar en un input text

".$b."'.";
						}else{
									while($row=mysql_fetch_array($sql)){
												$nombre = $row['nombre'];
												$id = $row['id'];
												//Aca creas los inputs
												echo ""
												//echo $id." - ".$nombre."

"; } } } ?>

14 comentarios en “Buscador instantaneo con PHP MySQL y jQuery”

    1. Jean para mostrar los resultados en un input text solo debes modificar en la linea 24 donde esta echo $id.» – «.$nombre.»

      «; por el input.

      echo ‘‘;
      echo ‘‘;

      espero que te sirva

  1. amigo necesito que al introducir en un imput un «id» me busque los registros en mysql y me los muestre en caja de texto, no he podido poner en marcha tu ejemplo.

  2. Hola Edwin, ahi actualice el código para que te pueda mostrar los resultados de la consulta dentro de un input text. pudes fijarte en la línea 23 pues es en la unica parte que cambia. Espero que te funcione

  3. disculpa ya Corriente tu ejemplo mil gracias.. trabajo con form de HTML.. anteriormente buscaba los datos con JavaScript pero me actualiza la.pagina y ya no quiero eso… quiero q al salir del.foco me muestre en los mismos input de mi formulario. . tengo un formulario con codigo nombre y apellidoy otros datos.. como haria para mostrar las variables en esos.imputs?

  4. Hola buen día, perdonen, lo he probado y funciona muy bien, pero no puedo hacer que lea una variable session de php, la lee en cualquier otro programa pero en este no, alguien podría apoyarme con este dilema, muchas gracias, saludos.

  5. Que buen buscador muy interesante pero una consulta si quisiera desarrollar un buscador con filtros como el que se ve en esta pagina que te pongo a continuación:
    http://urbania.pe/
    como podria implementarlo en mi web sin necesidad de usar una base de datos espero me puedas ayudar gracia por tus aportes son muy buenos felicitaciones

  6. Que podría escribir y donde para que al momento de borrar lo del input aparezca como cuando esta vacío? literalmente esta vacío, pero ya había escrito y lo borré, pregunto porque al momento de borrar todo, no restaura lo que debería de aparecer cuando esta vacio.

  7. Hola buenas tardes,
    Me podrias ayudar, necesito hacer lo mismo, solo que tenga un tiempo de retraso, esto con el fin de que el ususario termine de digitar antes de que traiga los datos, como podria hacer eso, gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.