LiveSearch: La primera aplicación Ajax

baluart5 Julio 2005 - 12:00am 9 comentarios
Enviar por Email Imprimir

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…

Ver ejemplo

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

Comentarios

Imagen de jaison
jaison

Muy interesante

Imagen de jaime
jaime

Parece que ya no hace nada.

Imagen de gonzalo
gonzalo

hola. fijate que el ejemplo si bien anda, no debe tener una base de datos cargada para funcionar como debe hacerlo.saludos. 

Imagen de Bal

Gracias Gonzalo, el art

Imagen de audiovino
audiovino

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

Imagen de traza, diseño web
Imagen de jesusalas
jesusalas

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

Imagen de faviant
faviant

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.

Imagen de lordramon
lordramon

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!

Dejar comentario

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más