Ajax Auto Suggest

  • 19/02/2007
  • 11:21 pm
  • unijimpe

Ajax Auto Suggest es una librería de javascript que agregar un pulldown con valores sugeridos a un campo de texto. Permite utilizar el teclado para seleccionar un valor. Los datos para esta lista se llaman desde un archivo XML que puede ser generado por PHP o cualquier otro lenguaje.

autosuggest2.jpg

Entre las principales características de esta librería tenemos:

  • Uso del teclado para seleccionar un dato.
  • Mensaje opcional cuando no hay resultados.
  • Auto-completar cuando se presiona la tecla ENTER.
  • Soporte a funciones Callback
  • Diseño excelente.

Funcionamiento:

Para implementar Ajax Auto Suggest, el primer paso es descargar la librería, luego de extraer los archivos, creas un archivo html donde debes insertar un llamado a la librería.

HTML:
  1. <script type="text/javascript" src="bsn.AutoSuggest_c_2.0.js">
  2. </script>

Luego creas un formulario en el cual insertas un campo de texto que nos servirá para hacer el suggest que deseamos.

HTML:
  1. <form method="get" action="">
  2. Persona<br />
  3. <input type="text" id="criterio" value="" /><br />
  4. <input type="submit" value="Enviar" />
  5. </form>

El siguiente paso es convertir este campo de texto normal en un campo de texto AutoSuggest, esto se hace insertando el siguiente código Javascript antes del tag .

HTML:
  1. <script type="text/javascript">
  2.     var options = {
  3.         script:"test.php?",
  4.         varname:"input"
  5.     };
  6.     var as_xml = new AutoSuggest('criterio', options);
  7. </script>

Donde se tiene que: script.php es el script que nos devolverá el XML con los datos para el suggest, varname es el nombre de la variable que se le pasará por método GET al script antes definido. Por ejemplo si escribimos Al en el campo se pedirá los datos de: test.php?input=Al.

Para finalizar el XML que devuelve el PHP debe tener un determinado formato para poder ser interpretado con nuestro Ajax Suggest.

XML:
  1. <results>
  2.     <rs id="1" info="">Alejandro</rs>
  3.     <rs id="2" info="">Alberto</rs>
  4.     <rs id="3" info="">Alma</rs>
  5. </results>

Conclusiones

Esta librería es muy sencilla de implementar, lo unico que debemos hacer es crear el PHP que haga la consulta a la base de datos y genere el XML en el formato deseado, la otra parte será controlada por esta librería. Además un punto importante es que esteticamente esta librería esta muy bien lograda pues el suggest es muy intuitivo y con colores muy sobrios.

Pueden ver un ejemplo de de esta librería y además descargar los archivos fuente en: http://www.brandspankingnew.net/.

Quien se anima ha implementar esta librería como un plugin para WordPress??...

Posts Relacionados

Total de Comentarios: 7

Publicidad
danielsemper
20/02/2007
5:49 am

Excelente dato!
Esto me servira para unos proyectos empresariales (RIAs) que tengo que desarrollar :)

danielsemper
20/02/2007
5:56 am

Offtopic: Aprovecho este post para darte la primicia de que ctrl-F5 ha cambiado de nombre y de URL. Ahora es Aeromental: http://www.aeromental.com/
Espero actualices tu blogroll y feeds.

Giancarlo
21/02/2007
11:26 am

Mejor compren una Mac :P

tony
26/11/2007
1:40 pm

Hola a todos,
Aprovecho tu blog para deciros que he creado el AutoComplete para Prototype basandome en AutoSuggest (de hecho no deseo ningun reconocimiento para su demo ni su CSS). En el tambien incluyo nuevas formas de creación dinámica (onfocus),notificadores (lupa, spinner), onajaxerror callbacks, nuevas propiedades, etc…

Si deseais chequearlo, me encantaría saber de vuestros comentarios.

La dirección es: http://webeaters.blogspot.com/2007/11/ajax-powered-autocomplete-for-prototype.html

tony
27/11/2007
11:51 am

me dicen que mi proyecto no funciona en IE6 e IE7. lamentablemente tengo solo una mac (bastante me costo) y no puedo chequearlo… alguién podría colaborar en ello? seguro que es una tontería…

saludos

Cristian
15/02/2008
12:09 pm

Muy buen aporte, seria bueno que nos mostraras como implementarlo con php y mysql.
Siempre son de gran valor tus articulos.

Ingrid Espinel
30/05/2008
12:50 pm

Mes gustaria probar con una base de datos si alguien tiene una ayuda me gustaria saber como porfis

Enviar Comentario

(*)

(*)