Cómo crear un buscador para sitio web usando JQuery

Código HTML

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

			<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 vemos el archivo buscar.php que es el que realiza la busqueda en la tabla mysql

<?php
 
      $buscar = $_POST['b'];
       
      if(!empty($buscar)) {
            buscar($buscar);
      }
       
      function buscar($b) {
            $con = mysql_connect('localhost','usuario', 'password-bd');
            mysql_select_db('nombre-bd', $con);
       
            $sql = mysql_query("SELECT * FROM paises WHERE nombre LIKE '%".$b."%' LIMIT 10" ,$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'];
                $prefijo = $row['prefijo'];
                $continente = $row['continente'];
                echo $prefijo." - "."<a>".$nombre."</a>"."<br />";
            }
        }
  }
       
?>
	

Demostración

Queda disponible esta demo con un listado de países y sus prefijos telefónicos para llamadas internacionales

Anuncios / Ads
Anuncios / Ads

Sobre programación web

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Usar PDO para conectarse a MYSQL
• Cómo detectar el navegador usando JavaScript

Fotografía

• Michelles Jaque
• Beatriz Cabrera Zapata

Poesías

• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales

Últimas Publicaciones

• Cómo desarmar un notebook HP Compaq Presario C700
• Enviar correos usando un formulario desde sitio web o localhost con PHPMailer
• Cómo crear un cuadro de búsqueda al estilo Google
• Sistema de LogIn con verificación de email y recuperación de contraseña usando PHP
• Proyecto Intranet: Ordenes de servicio y ventas
• Demostración Jquery UI Selectable usando php y bases de datos mysql

Anuncios / Ads

Newsletter



Gracias. Te mantendremos informado

Website Template por IdeasChile © Optimizado para Chrome - Firefox - Opera