Búsqueda Instantánea Con AJAX

Bsqueda instantnea con
AJAX, PHP y MySQL

Posted onagosto 9, 2015 by Rocanrol
Hoy traigo un tutorial donde mostrar una manera de obtener y mostrar

datos de una base de datos MySQL con PHP y AJAX sin necesidad de
recargar la pgina. En la bsqueda haremos una consulta a la BBDD para que
sea case-insensitive y pueda concatenar varias columnas.
Ejemplo del res ultado y s us peticiones al s ervidor
Cmo crear una bsqueda instantnea?

Esta vez har el desarrollo en local, por cuestiones de comodidad. Utilizar
XAMPP (Apache y MySQL con PHPMyAdmin) en Windows.
1 de 5: HTML
Lo primero que necesitamos es un lienzo en blanco en PHP, al cual
llamaremos index.php(por ejemplo).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin ttulo</title>
</head>
<body>
</body>
</html>
Despus agregamos un formulario que acepte UTF-8 y con mtodo POST.

En el form debe haber un input del tipo texto (o bsqueda (search)) con
nombre e ID busqueda. Opcionalmente se le puede aadir un valor
y placeholder vaco, un mximo de 30 caracteres y el auto-completado
apagado, adems de un texto arriba del formulario.
Debajo de este vamos a crear un contenedor donde se muestren los

resultados de la bsqueda:
<form accept-charset="utf-8" method="POST">
<input type="text" name="busqueda" id="busqueda" value=""

placeholder="" maxlength="30" autocomplete="off" />
</form>
<div id="resultadoBusqueda"></div>
2 de 5: jQuery
A continuacin hay que agregar la librera de jQuery en el head del
HTML para poder usar la funcin POST. Yo utilizar la versin 1.9.1
minificada que tengo descargada.
<script src="js/jquery-1.9.1.min.js"></script>
Ahora debemos crear una funcin, donde habr una variable que sea el valor
del input en el formulario. Yo llamar a la funcin buscar.
<script>
function buscar() {
var textoBusqueda = $("input#busqueda").val();
};
</script>
Entonces creamos una condicional donde, si el input est vaco, no haga

nada (o sea, que no modifique el contenedor resultadoBusqueda) y, sino
est vaco el input, la funcin POST de jQuery mostrar el resultado. Esta
funcin toma los datos de la siguiente forma:
$.post( url [, data ] [, success ] [, dataType ] )

Puedes obtener ms informacin al respecto desde la web oficial de
jQuery (ingls).
As que la funcin es la siguiente:
<script>
function buscar() {
if (textoBusqueda != "") {
$.post("buscar.php", {valorBusqueda:
textoBusqueda}, function(mensaje) {
$("#resultadoBusqueda").html(mensaje);
});
} else {
("#resultadoBusqueda").html('');
};
};
</script>
La estructura del $.post de jQuery en esas lneas funciona de la siguiente

manera:
1. buscar.php -> Toma la URL donde estar el PHP que va a devolver

los resultados de la consulta a MySQL (eso lo haremos un poco ms
adelante).
2. valorBusqueda: textoBusqueda -> Donde valorBusqueda es el
nombre del POST que le daremos en PHP ( $_POST[valorBusqueda] )
para obtener lo que hay en textoBusqueda, que es el ID del input en el
formulario.
3. function(mensaje) -> Crea una funcin que devolver el mensaje (el
cual no ser ms que un echo de PHP) en el contenedor con un
ID resultadoBusqueda (es decir: success).
4. $(#resultadoBusqueda).html(mensaje) -> En el
contenedor resultadoBusquedase mostrar ese echo en PHP.
Para mostrar un mensaje en el contenedor resultadoBusqueda CUANDO
SE VACE EL INPUT solo hay que modificar la siguiente linea del script:
$("#resultadoBusqueda").html('');
Y poner esto (por ejemplo):
$("#resultadoBusqueda").html('<p>JQUERY VACIO</p>');
Para que cuando cargue la pgina por primera vez (en cada visita)
muestre un mensaje en el contenedor, debemos declarar que, cuando el
documento haya cargado (y est listo), mostrar un mensaje usando el
mtodo HTML de jQuery.
$(document).ready(function() {
});
Por lo tanto, el script final sera algo como esto:
<script>
$(document).ready(function() {
});
function buscar() {
if (textoBusqueda != "") {
$.post("buscar.php", {valorBusqueda:
textoBusqueda}, function(mensaje) {
$("#resultadoBusqueda").html(mensaje);
});
} else {
$("#resultadoBusqueda").html('<p>JQUERY
VACIO</p>');
};
};
</script>
Opcionalmente podramos usar los mtodos de callback de jQuery,

como .done o .fail, o incluso console.log, dentro del $.post para informar al
cliente del estado de la peticin.
No utilizamos el evento .submit porque lo que queremos es que muestre los

resultados al escribir, sin tener que pulsar enter ni ningn botn.
En su lugar, para que el script obtenga los datos al escribir, debemos

aadirle a nuestro input el evento onKeyUp de Javascript, el cual ejecutar la
funcin buscar.
<input type="text" name="busqueda" id="busqueda" value=""
placeholder="" maxlength="30" autocomplete="off"
onKeyUp="buscar();" />
3 de 5: MySQL
En este ejemplo tengo una base de datos llamada mmv con
cotejamiento utf8_spanish_ci. Dentro tengo una tabla llamada mmv001 que
tiene cuatro columnas con el mismo cotejamiento. El motor de
almacenamiento es InnoDB.
1. id -> INT(5) -> UNIQUE -> A_I

2. nombre -> VARCHAR(30)
3. apellido -> VARCHAR(30)
4. edad -> INT(2)
Es conveniente que el mximo de caracteres en el input del formulario sea

de el mismo valor que una de las columnas (nombre o apellido en este
caso) de la BBDD.
4 de 5: PHP
Ahora viene la parte interesante. Lo primero que debemos hacer es crear un
archivo llamado buscar.php (o cualquiera que sea el nombre que hayamos
puesto en la URL del $.post de jQuery).
El archivo debe estar totalmente vaco. Las etiquetas HTML

(doctype, html, head, body, etc.) que puedan generar algunos editores de texto
(como Dreamweaver) deben ser eliminadas.
Entonces le decimos al documento que vamos a escribir PHP y requerimos
nuestro archivo de conexin a la BBDD.
<?php
//Archivo de conexin a la base de datos
require('conexion.php');
?>
Despus es conveniente crear una variable que almacene la informacin que

se enviar desde index.php con POST. Yo la llamar consultaBusqueda.
<?php
//Variable de bsqueda
$consultaBusqueda = $_POST['valorBusqueda'];
?>
Nota: valorBusqueda debe ser el nombre que hayamos puesto en

jQuery. {valorBusqueda: textoBusqueda}
A continuacin realizamos un filtro anti-XSS. Yo lo hago de la siguiente

manera:
//Filtro anti-XSS
$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">",

"'", "/");
$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "&
#x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "&
#047;");
$consultaBusqueda = str_replace($caracteres_malos,
$caracteres_buenos, $consultaBusqueda);
Nota: En $caracteres_buenos debes unir los ampersand (&) con los

caracteres que vienen despus, o no funcionar.
Una vez tenemos esto, creamos la variable que mostrar el contenido. La

generamos vaca para evitar ms adelante los E_NOTICE diciendo que no
hemos establecido un valor para esa variable.
<?php
//Filtro anti-XSS

"'", "/");

#x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "&
#047;");
//Variable vaca (para evitar los E_NOTICE)
$mensaje = "";
?>
Ahora es cuando comprobamos si $consultaBusqueda tiene algn

parmetro. Si la variable est seteada, entonces procedemos a realizar la
consulta a MySQL. Yo lo har con estilo de procedimientos, pero no debera
haber problema al hacerlo orientado a objetos.
<?php
//Filtro anti-XSS

"'", "/");

#x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "&
#047;");
$mensaje = "";
//Comprueba si $consultaBusqueda est seteado
if (isset($consultaBusqueda)) {
//Selecciona todo de la tabla mmv001
//donde el nombre sea igual a $consultaBusqueda,
//o el apellido sea igual a $consultaBusqueda,
//o $consultaBusqueda sea igual a nombre + (espacio)

+ apellido
$consulta = mysqli_query($conexion, "SELECT * FROM

mmv001
WHERE nombre COLLATE UTF8_SPANISH_CI LIKE

'%$consultaBusqueda%'
OR apellido COLLATE UTF8_SPANISH_CI LIKE

OR CONCAT(nombre,' ',apellido) COLLATE

UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
");
};
?>
Ahora vamos a obtener la cantidad de filas que devuelve la consulta para
despus hacer una condicional donde, si es igual a cero es porque no hay
registros con esos datos (lo escrito en el input), y sino, muestra los datos en
un bucle while. Por ltimo, hacemos un echo de $mensaje y listo.
<?php
//Filtro anti-XSS

"'", "/");

#x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "&
#047;");
$mensaje = "";
//Comprueba si $consultaBusqueda est seteado
if (isset($consultaBusqueda)) {
//Selecciona todo de la tabla mmv001
//donde el nombre sea igual a $consultaBusqueda,
//o el apellido sea igual a $consultaBusqueda,
//o $consultaBusqueda sea igual a nombre + (espacio)

+ apellido
$consulta = mysqli_query($conexion, "SELECT * FROM

mmv001
WHERE nombre COLLATE UTF8_SPANISH_CI LIKE

OR apellido COLLATE UTF8_SPANISH_CI LIKE

OR CONCAT(nombre,' ',apellido) COLLATE

UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
");
//Obtiene la cantidad de filas que hay en la consulta
$filas = mysqli_num_rows($consulta);
//Si no existe ninguna fila que sea igual a

$consultaBusqueda, entonces mostramos el siguiente mensaje
if ($filas === 0) {
$mensaje = "<p>No hay ningn usuario con ese

nombre y/o apellido</p>";
} else {
//Si existe alguna fila que sea igual a

$consultaBusqueda, entonces mostramos el siguiente mensaje
echo 'Resultados para

<strong>'.$consultaBusqueda.'</strong>';
//La variable $resultado contiene el array que

se genera en la consulta, as que obtenemos los datos y los
mostramos en un bucle
while($resultados =
mysqli_fetch_array($consulta)) {
$nombre = $resultados['nombre'];
$apellido = $resultados['apellido'];
$edad = $resultados['edad'];
//Output
$mensaje .= '
<p>
<strong>Nombre:</strong> ' . $nombre .

'<br>
<strong>Apellido:</strong> ' .
$apellido . '<br>
<strong>Edad:</strong> ' . $edad . '<br>
</p>';
};//Fin while $resultados
}; //Fin else $filas
};//Fin isset $consultaBusqueda
//Devolvemos el mensaje que tomar jQuery
echo $mensaje;
?>
5 de 5: Ejemplos
Una vez hecho todo lo anterior, podemos observar los resultados finales. Yo
no lo he aplicado ningn estilo, pero se puede hacer sin problemas.
El ID res ultadoBus queda es t definido en jQuery como J QUERY VACIO
Res ultado para pe, donde en la bas e de datos hay Prez y Pedro, vemos que es case-ins ens itive
Resultado de la consulta CONCAT(nombre, ,apellido ) COL LAT E UT F8_S PANISH_CI LI KE % $cons ultaBus queda%
Output
Conclusin:
Es ms fcil de lo que parece, es todo cuestin de comprender como funciona
cada parte, desde el HTML hasta la base de datos. Si te sirvi, por favor,
comprtelo.
Espero que el tutorial haya sido de utilidad. Nos leemos, saludos!

Búsqueda Instantánea Con AJAX

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Búsqueda Instantánea Con AJAX

Uploaded by

Copyright:

Available Formats

Bsqueda instantnea con

AJAX, PHP y MySQL

Hoy traigo un tutorial donde mostrar una manera de obtener y mostrar

Cmo crear una bsqueda instantnea?

<title>Documento sin ttulo</title>

Despus agregamos un formulario que acepte UTF-8 y con mtodo POST.

Debajo de este vamos a crear un contenedor donde se muestren los

<form accept-charset="utf-8" method="POST">

<input type="text" name="busqueda" id="busqueda" value=""

var textoBusqueda = $("input#busqueda").val();

Entonces creamos una condicional donde, si el input est vaco, no haga

$.post( url [, data ] [, success ] [, dataType ] )

As que la funcin es la siguiente:

var textoBusqueda = $("input#busqueda").val();

La estructura del $.post de jQuery en esas lneas funciona de la siguiente

1. buscar.php -> Toma la URL donde estar el PHP que va a devolver

Y poner esto (por ejemplo):

Por lo tanto, el script final sera algo como esto:

var textoBusqueda = $("input#busqueda").val();

Opcionalmente podramos usar los mtodos de callback de jQuery,

No utilizamos el evento .submit porque lo que queremos es que muestre los

En su lugar, para que el script obtenga los datos al escribir, debemos

1. id -> INT(5) -> UNIQUE -> A_I

Es conveniente que el mximo de caracteres en el input del formulario sea

El archivo debe estar totalmente vaco. Las etiquetas HTML

//Archivo de conexin a la base de datos

Despus es conveniente crear una variable que almacene la informacin que

//Archivo de conexin a la base de datos

Nota: valorBusqueda debe ser el nombre que hayamos puesto en

A continuacin realizamos un filtro anti-XSS. Yo lo hago de la siguiente

$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">",

Nota: En $caracteres_buenos debes unir los ampersand (&) con los

Una vez tenemos esto, creamos la variable que mostrar el contenido. La

//Archivo de conexin a la base de datos

$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">",

$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "&

Ahora es cuando comprobamos si $consultaBusqueda tiene algn

//Archivo de conexin a la base de datos

$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">",

$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "&

//Comprueba si $consultaBusqueda est seteado

//Selecciona todo de la tabla mmv001

//donde el nombre sea igual a $consultaBusqueda,

//o el apellido sea igual a $consultaBusqueda,

//o $consultaBusqueda sea igual a nombre + (espacio)

$consulta = mysqli_query($conexion, "SELECT * FROM

WHERE nombre COLLATE UTF8_SPANISH_CI LIKE

OR apellido COLLATE UTF8_SPANISH_CI LIKE

OR CONCAT(nombre,' ',apellido) COLLATE

//Archivo de conexin a la base de datos

$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">",

$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "&

//Variable vaca (para evitar los E_NOTICE)

//Selecciona todo de la tabla mmv001

//donde el nombre sea igual a $consultaBusqueda,

//o el apellido sea igual a $consultaBusqueda,

//o $consultaBusqueda sea igual a nombre + (espacio)

$consulta = mysqli_query($conexion, "SELECT * FROM

WHERE nombre COLLATE UTF8_SPANISH_CI LIKE

OR apellido COLLATE UTF8_SPANISH_CI LIKE

OR CONCAT(nombre,' ',apellido) COLLATE

//Obtiene la cantidad de filas que hay en la consulta

//Si no existe ninguna fila que sea igual a

$mensaje = "<p>No hay ningn usuario con ese