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>
$(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 9" ,$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 />";
}
}
}
?>
Queda disponible esta demostración con un listado de países y sus prefijos telefónicos para llamadas internacionales, también dejo la opción de descargar el codigo con los archivos actualizados con MySQLi que permite acceder a mysql 4.1 y posterior ademas de la tabla paises, articulo n° 8.
• 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
• Cómo desarmar un notebook HP Compaq Presario C700
• Proyecto Intranet: Ordenes de servicio y ventas
• Michelles Jaque
• Beatriz Cabrera Zapata
• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales
• 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
• Demostración Jquery UI Selectable usando php y bases de datos mysql
• Subir, insertar, actualizar, borrar imágenes con PHP y MySQL
• Calculadora IMC usando JavaScript
• Select Dependientes con Ajax MySQL PHP
• Expresiones regulares en PHP
• Cómo convertir datos MySQL en formato JSON en PHP
• Visualizar datos en una tabla html con mysqli
• Siembras: Aplicación en Laravel 5.5