Ajax Auto Suggest

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.

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

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

  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.

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

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]

Alejandro
Alberto
Alma

[/xml]

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??…

Comentarios Total 10 comentarios


danielsemper
Publicado: 20/02/2007 5:49 am

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

danielsemper
Publicado: 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
Publicado: 21/02/2007 11:26 am

Mejor compren una Mac :P

tony
Publicado: 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
Publicado: 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
Publicado: 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
Publicado: 30/05/2008 12:50 pm

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

fernanda
Publicado: 07/10/2008 8:46 am

No me funciona cuando escribo una palabra con la letra “Ñ”. Alguien sabe como lo puedo solucionar. Gracias

José
Publicado: 26/06/2009 9:36 am

No me funciona con letra Ñ y acentos!!! :(… alguien paso por esto?

Alessandra
Publicado: 27/03/2011 12:10 pm

Para os que tiveram problemas com os caracteres especiais, é só tirar o uft8_decode do arquivo test.php ;)

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)