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. El enlace de descarga está al final del artículo, pero para poder verlo primero tienes que Iniciar sesión.
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:
<script type="text/javascript" src="livesearch.js"></script>
Luego en la etiqueta body, llamamos a la función liveSearchInit(), para que se ejecute al momento de cargarse la página:
<body onload="liveSearchInit()" >
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:
<form onsubmit="return liveSearchSubmit()" name="searchform" method="get" action="./" id="searchform">
<input type="text" id="livesearch" name="q" size="15" onkeypress="liveSearchStart()" />
<div class="LSresult" id="LSResult">
<ul id="LSShadow"> </ul></div>
</form>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
Si te gustó este artículo también te gustará...
Muy interesante
Parece que ya no hace nada.
hola. fijate que el ejemplo si bien anda, no debe tener una base de datos cargada para funcionar como debe hacerlo.saludos.
Gracias Gonzalo, el art
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
Gracias por tu ejemplo, me sirvio para un proyecto que tenia pendiente.
Saludos
HOLA LO TRATE DE REALIZAR CON BASE DE DATOS PERO NO FUNCIONO, ME PUEDEN AYUDAR GRACIAS HOLA YA RESOLVI MI PROBLEMA FUE QUE FULLTEXT SOLAMENTE FUNCIONA CON BASES DE DATOS DE TIPO MyISAM
Cual es la estructura para crear la Base de Datos creo que les falo la parte fundamental la creacion de la DB sin eso no funcionara nada.
Hola, queria pedirte los archivos ya que no encontre ningun link para descargarlos, mas que nada el livesearch.js. Muy buen post. te dejo mi mail: rcerratto@yahoo.com.ar
Muchas gracias!