Blog Reacción Estudio

¡Tu zona de aprendizaje!

Asignar evento a un elemento generado dinámicamente con jQuery

Búsqueda instantánea con jQuery y PHP

Hoy vamos a aprender como hacer una búsqueda instantánea al estilo de Google. En el siguiente código mostramos la forma más básica para conseguir este resultado, vamos a verlo:

Primero creamos el archivo principal, podemos llamarlo como queramo. En este archivo mostraremos la caja de búsqueda y mostraremos los resultados:

HTML

<input type="text" id="busqueda" />
            
<div id="resultado"></div>

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("<p align='center'><img src='ajax-loader.gif' /></p>");
	  	  	  },
	  	  	  error: function(){
	  	  	  	  alert("error petición ajax");
	  	  	  },
	  	  	  success: function(data){                                                    
	  	  	  	  $("#resultado").empty();
	  	  	  	  $("#resultado").append(data);
										
	  	  	  }
	  	  });
													   
												  
	  });
											
});

Ahora vamos con el archivo “buscar.php“, es el encargado de realizar la búsqueda.

<?php

	$buscar = $_POST['b'];
	
	if(!empty($buscar)) {
		buscar($buscar);
	}
	
	function buscar($b) {
		$con = mysql_connect('localhost','root', 'root');
		mysql_select_db('base_de_datos', $con);
	
		$sql = mysql_query("SELECT * FROM anuncios WHERE nombre LIKE '%".$b."%'",$con);
		
		$contar = mysql_num_rows($sql);
		
		if($contar == 0){
			echo "No se han encontrado resultados para '<b>".$b."</b>'.";
		}else{
			while($row=mysql_fetch_array($sql)){
				$nombre = $row['nombre'];
				$id = $row['id'];
				
				echo $id." - ".$nombre."<br /><br />";	
			}
		}
	}
	
?>

Ver ejemplo

Podéis descargar imágenes de carga para Ajax usando de este generador online:

http://www.ajaxload.info/

  • Hugo

    Hola me gusto tu ejemplo pero tendras algun demo o algo parecido?

  • Jesus antonio

    Hola me igual la pregunta que te hizo el compañero, tendrias algun demo, para probar el codigo?

  • http://pinterest.com/gsanchez1687/ Guillermo Enrique

    Una sugerencia para mejorar esto..solo es una linea de código

    –En el script–

    success: function(data){
    $(“#filtro”).html(data);
    $(“#busqueda”).val(consulta);
    }

    así para cuando realice la búsqueda no se borre lo que hayas escrito antes, así se mantendrá así tipo google

  • admin

    He optimizado el código javascript, ya no hace falta poner la línea que dijo “Guillermo Enrique”, además también he añadido el ejemplo a petición de algunos usuarios.

    Un saludo.

  • Sebaxs Alejandro Galindo Galla

    hola, yo soy novato en esto pero esta buenísimo justo lo que necesito pero estoy topando en el jquery donde y como pego ese código?? gracias le agradeceria mucho su respuesta by!

    • Alberto

      Veo que andas muy perdido, te recomiendo leer el siguiente manual de jQuery para salir del paso:

      http://librojquery.com/

      Un saludo.

      • Juan

        es un “.js” y lo llamas desde el html. entre el

        • Alberto

          ¿Perdón? ¿A qué te refieres?

          • Juan

            Yo me entiendo =D jajaja,
            Quisiera una ayuda con mi sistema @disqus_w3Gci6Q0EK:disqus. sobre alertas automaticas de stock y fecha de vencimiento.

          • Alberto

            Si quieres te podemos hacer un presupuesto a medida para un desarrollo web.

            Puedes ponerte en contacto con nosotros desde nuestra página web.

            http://www.reaccionestudio.com/contacto.html

            Un saludo.

  • ariel

    consulta, el código jquery, en que pagina va insertado?

    • Alberto

      Puede ir insertado en la misma página o en un archivo .js a parte.

  • Javho Javier

    hola espero que me ayuden con el siguiente problema q vengo presentando en mi sistema:
    EL PROBLEMA ES MI BUSCADOR
    AL DIGITAR UNA PALABRA SI BUSCA TODO MI CONTENIDO
    AL DIGITAR 2 PALABRAS NO BUSCA NADA
    OSEA EL PROBLEMA ES CON LA BARRA ESPACIA DORA

    NECESITO DE SU AYUDA POR FAVOR

  • Manuel

    Hola estoy intentado hacer que funcione si introduzco 2 valores, por ejemplo tengo guardado:
    Valor1: 5532
    Valor2: 1500
    Entonces en el valor1 marco para buscar 5 y en el valor2 marco 1, deveria salir los dos valores 5532 + 1500, nose si me explico.

    Saludos.

  • Luis Batista Tavarez

    Eso se puede utilizar para buscar personas en una base de datos y desplegar una lista con los nombres de esas personas segun lo introducido?

  • Rey

    Necesitas librerias o algo mas para hacer que funcione, intente con este mismo codigo adaptandolo a mi base de datos y no muestra nada, nisiquiera la imagen de carga!! ¿Alguna Sugerencia?

  • Edwin

    Y si quiero agregar mas campos para la busqueda

  • Henry Bravo

    he hecho tal como esta el codigo de arriba pero, al ejecutar el archivo me dice que tengo error en la peticion ajax, pero boy y lo reviso y no encuentro el error espero y me puedes ayudar, saludos

  • kokonoe

    no funciona

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR