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.

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.

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

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

<form method="get" action="">
Persona<br />
<input type="text" id="criterio" value="" /><br />
<input type="submit" value="Enviar" />
</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 .

<script type="text/javascript">
	var options = {
		script:"test.php?",
		varname:"input"
	};
	var as_xml = new AutoSuggest('criterio', options);
</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]

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

Posts Relacionados

• Capxous: Autocomplete en AJAX
• Charles Web Debugging Proxy
• SWFObject en Google Library
• Textareas escalables
• Google AJAX Libraries API