 |
| Buscador en Tiempo Real |
En este ejemplo se realiza un buscador en tiempo real utilizando AJAX, PHP, y MySQL.
Bueno ¡ Manos a la Obra !
Para este ejemplo utilizaremos una pequeña base de datos llamada mydata en la cual tendremos una sola tabla llamada persona la cual cuenta con dos campos Cod y Nombre.
Aqui el codigo de creacion de la base de datos:
-------------------------------------------------------------------------------------------------------------
CREATE DATABASE mydata; USE mydata; CREATE TABLE persona(cod int NOT NULL, nombre varchar(32) NOT NULL, primary key(cod));-------------------------------------------------------------------------------------------------------------
Para realizar la conexión a la base de datos utilizaremos dos scripts PHP, un archivo llamado config.php, en este definiremos el nombre de la base de datos, host, usuario y contraseña, para acceder a la base de datos y el el archivo conexion.php usaremos estos valores para establecer la conexión.
Archivo config.php:
-------------------------------------------------------------------------------------------------------------
config.php
-------------------------------------------------------------------------------------------------------------<?php const HOST = "localhost"; const DB = "mydata"; const USER = "root"; const PASS = ""; ?>-------------------------------------------------------------------------------------------------------------
Archivo conexion.php:
-------------------------------------------------------------------------------------------------------------
conexion.php
-------------------------------------------------------------------------------------------------------------
<?php
require_once('config.php');
class conexion{
private $db;
public function conexion(){
$this->db = new mysqli(HOST, USER, PASS, DB);
}
public function getConexion(){
if($this->db->connect_errno){
echo "Error en la Conexion con la base de datos";
}
else{
return $this->db;
}
}
public function closeConexion(){
$this->db->close();
}
}
?>
-------------------------------------------------------------------------------------------------------------
Continuamos con nuestro archivo HTML el cual tiene una estructura muy sencilla. nuestra plantilla contendrá un campo el cual sera usado para la búsqueda de los registros y contara con un espacio donde mostrar estos resultados.
Archivo index.html:
-------------------------------------------------------------------------------------------------------------
index.html
-------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Buscador</title>
<script src="main.js"></script>
</head>
<body>
<h1>Buscador AJAX, PHP, MySQL</h1>
<input type="search" placeholder="Buscar" id="buscar">
<div id="datos"></div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
Ahora continuamos con el archivo main.js, este sera el encargado de comenzar la búsqueda y mostrar los resultados arrojados por ella, para este se agregara una escucha al evento 'input' del campo 'buscar', este evento es disparado cuando se escribe algún carácter en el campo, luego que el evento se acciona la función buscar captura el valor del campo en ese momento y lo envía vía POST al archivo buscar.php, archivo que se encarga de procesar la búsqueda en la base de datos
Bueno sin mas preámbulos aquí esta el archivo main.js:
-------------------------------------------------------------------------------------------------------------
main.js
-------------------------------------------------------------------------------------------------------------
function buscar(){
var pattern = document.getElementById('buscar').value;
var solicitud = new XMLHttpRequest();
var data = new FormData();
var url = 'buscar.php';
data.append("pattern", pattern);
solicitud.open('POST',url, true);
solicitud.send(data);
solicitud.addEventListener('load', function(e){
var cajadatos = document.getElementById('datos');
cajadatos.innerHTML = e.target.responseText;
}, false);
}
window.addEventListener('load', function(){
document.getElementById('buscar').addEventListener('input', buscar, false);
}, false);
-------------------------------------------------------------------------------------------------------------
Por ultimo tenemos el archivo buscar.php, que como se comentaba anteriormente es el encargado de realizar la búsqueda en la base de datos usando como patrón de búsqueda el patrón recibido por POST, así si se recibió una letra, por ejemplo la letra A el resultado de la consulta serán todos los registros cuyo nombre comienza con esta letra.
Archivo buscar.php
-------------------------------------------------------------------------------------------------------------
buscar.php
-------------------------------------------------------------------------------------------------------------
<?php
require_once('conexion.php');
if(!empty($_POST)){
$pattern = $_POST['pattern'];
$db = new conexion();
$conex = $db->getConexion();
$sql = "SELECT * FROM persona WHERE nombre LIKE '".$pattern."%';";
if($result = $conex->query($sql)){
$numrows = $result->num_rows;
if($numrows > 0){
$registros = "<table>
<tr>
<th>Codigo</th >
<th>Nombre</th >
</tr>";
while($row = $result->fetch_assoc()){
$registros = $registros.
"<tr>".
"<td>".$row['cod']."</td >".
"<td>".$row['nombre']."</td >".
"</tr>";
}
$registros = $registros."</table >";
print $registros;
}else{
print "No se Encontraron Coincidencias.";
}
}else{
print $conex->error;
}
}
?>
-------------------------------------------------------------------------------------------------------------
¿ Tienes 1 hora diaria disponible y quieres ganar dinero por Internet ? Registrese aquí
