LiveSearch: La primera aplicación Ajax
A continuación veremos una aplicación Ajax, muy fácil de adaptarla y muy útil, vamos a crear un sistema de búsqueda instantánea con AJAX, PHP y MySQL…
Este sistema consta de 3 páginas, la página que muestra el liveSearch puede ser html, la pagina que ejecuta la consulta a la base de datos de extensión php y la página javascript que hace el refresh.
Primero que todo, bájate el ejemplo del área de descargas.
Nota: Si todavía no sabes que es Ajax, lee este corto artículo.
LiveSearch.html
Este código es el que debes colocar en tus páginas Web.
Empezamos colocando el enlace al fichero JavaScript dentro de las etiquetas head, de esta manera:
<p><script type="text/javascript" src="livesearch.js"></script></p>Luego en la etiqueta body, llamamos a la función liveSearchInit(), para que se ejecute al momento de cargarse la página:
<p><body onload="liveSearchInit()" ></p>Sin embargo, lo más importante de este fichero html es colocar bien los ids y las llamadas a las funciones, hay que estar atentos al modificar el script, de no cometer algún error.
El formulario del ejemplo quedaría de esta manera:
<p><form onsubmit="return liveSearchSubmit()" name="searchform" method="get" action="./" id="searchform"><br /><input type="text" id="livesearch" name="q" size="15" onkeypress="liveSearchStart()" /><br /><div class="LSresult" id="LSResult"><br /><ul id="LSShadow"> </ul></div><br /></form></p>Cómo funciona? Cuando se introduce una palabra en el campo de texto inmediatamente aparecerá el resultado en la div LSResult, en el caso del ejemplo le añadimos las etiquetas ul, para que los resultados se muestren como lista desordenada.
Estando esto correcto, veamos el PHP.
La Consulta a la Base de datos MySQL: LiveSearch.php
El fichero livesearch.php tiene una simple consulta a la base de datos en este caso utilizando Texto completo (Full Text) para quien no tiene idea como crear un sistema de búsqueda en este enlace hay un práctico tutorial.
La idea es que este fichero muestre la consulta a la Base de datos, los cuales como te das cuenta están dentro de etiquetas li, dentro de un bucle do… while.
¿Qué es lo importante? Lo importante de este fichero es que el parámetro URL que utilices sea el mismo que coloques en el JavaScript, de lo contrario, por obvias razones, no funcionará. En el ejemplo que tienes, el parámetro es SearchString, aunque lo puedes modificar.
Y finalizamos el JavaScript
LiveSearch.js
Este es en realidad el fichero complejo, que contiene las funciones necesarias para hacer el refresh inmediato. Aprender cada línea de código es complicarse la vida. Pero si debes conocer lo básico. Esto es la función: liveSearchDoSearch(), en la línea 134 esta el parámetro de búsqueda, este parámetro es el que debe concordar con la variable URL que pasas al fichero PHP.
De esta manera, ya tienes tu LiveSearch totalmente funcional, listo para añadirlo a tus páginas Web.
Código JavaScript Original de Bitflux
Muy interesante
- responder
Enviado por jaison (no verificado) el Vie, 06/09/2006 - 02:51.Parece que ya no hace nada.
- responder
Enviado por jaime (no verificado) el Mié, 05/16/2007 - 19:59.hola. fijate que el ejemplo si bien anda, no debe tener una base de datos cargada para funcionar como debe hacerlo.saludos.
- responder
Enviado por gonzalo (no verificado) el Mar, 07/24/2007 - 11:34.Gracias Gonzalo, el art
- responder
Enviado por Bal (no verificado) el Mié, 07/25/2007 - 15:40.mi interesaria hacer un livesearch con "profesiones",y una vez que elijes una, me haga un efecto tipo lightview (en la misma pagina) y me muestre la info (traida de una base)de cada una de esas profesiones:ejemplo carpintero y me traiga la ficha de cada carpintero
- responder
Enviado por audiovino (no verificado) el Jue, 05/08/2008 - 15:36.Gracias por tu ejemplo, me sirvio para un proyecto que tenia pendiente.
Saludos
- responder
Enviado por traza, diseño web (no verificado) el Mar, 04/21/2009 - 22:42.Deja tu comentario