 |
| 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í
Hola compañero agradezco el tiempo que te tomaste para explicar y dar solución me parece perfecto este tutorial gracias buen dia
ResponderBorrarLlevo mucho buscando un código el cual pudiera adaptar a mi proyecto y me sirviera, en verdad te lo agradezco, me sirvió mucho.
ResponderBorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarHola me ayudo mucho el codigo.pero quiero saber como hago para que al borrar con backspace o presionar la x que aparece en el campo de busqueda,no muestre todo el contenido almacenado en la bd. En este ejemplo,al borrar muestra todo y luego al tipear alguna letra hace la busqueda.quisiera que cuando se borre no muestre toda la informacion pero no se como hacerlo. Agradezco la ayuda
ResponderBorrarHola, tengo la misma duda, lograste solucionarlo?
BorrarHola, Tal vez puedas solucionarlo usando un condicional,
Borrarverificando la variable pattern de la función buscar
if(pattern != ''){
// codigo a ejecutar
}
Gracias por comentar, espero te ayude
Funciona perfecto todo; para que no se quede el resultado al borrar y dejarlo vacío yo lo tengo así, cuando elimino la última letra escrita se queda a cero sin mostrar resultados.
Borrarif(!empty($_POST)){
if(strlen($_POST[pattern])>=1) {
alguien sabe por que muestra las etiquetas en el resultado?
ResponderBorrarSolo borra esto </ en las lineas 31 y 32 de archivo buscar.php
Borrary en lugar de eso pon esto <
Buenas tardes excelente codigo funciona pero como hago para que me muestre los datos una vez entrado en el index, es decir que aparezcan los datos sin necesidad de teclear algo
ResponderBorrarNo veo nada de ajax o jquery, eso forma de programar es javascript de forma nativa
ResponderBorrarEn el ejemplo no se usa jQuery, se usa la tecnologia AJAX de forma nativa usando solo javascript
BorrarNota: AJAX no depende de jQuery
Gracias por comentar
Realmente no tienes idea de como me ayudaste colega, muchas gracias.
ResponderBorrarhola de casualidad alguien sabe por que si se ejecuta varias veces una búsqueda se cae todo el servicio como si consumiera todos los recursos esta consulta la tengo tal cual
ResponderBorrarAmigo deberías probar a cancelar las peticiones xhr cuando se genere una nueva consulta, así ahorrarías recursos en el servidor
BorrarBuenas tardes, como hago para que solo me muestre los resultados si son exactos no que vaya haciendo una busqueda en tiempo real
ResponderBorrar