scriptaculous autocompleter with Xajax

Hace tiempo en Innox implementé en alguno de los sistemas un autocomplete, al estilo Google Suggest. Sin embargo, hay más variables a considerar de las que pueden verse a simple vista y realmente terminé con un cagadero de javascript (que ciertamente funcionaba) pero que simplemente se volvió inmantenible.

Bueno, pues decidí utilizar el autocompleter de scriptaculous ya que es una librería que ya teníamos entre nuestros COTS.

Hay dos autocompleters en scriptaculous el Autocompleter.Local que trabaja a través de arreglos fijos y el Ajax.Autocompleter que trabaja con requests ajax del tipo Ajax.Request de la misma librería. Sin embargo nosotros usamos Xajax una librería de PHP que en verdad facilita el trabajo manejando toda la obra negra y dejandonos un set de funciones javascript que corresponden a funciones o métodos de objetos en PHP. ¿Cómo integrarlo?

Bueno, ya que no encontré nada por la red hice mi propio workaround que tal vez a alguien le sirva.

Xajax.Autocompleter = Class.create();
Object.extend(Object.extend(Xajax.Autocompleter.prototype, Autocompleter.Base.prototype), {
  initialize: function(element, update, xajax_function, options) {
    this.baseInitialize(element, update, options);
    this.options.defaultParams = this.options.parameters || null;
    this.xajax_function        = xajax_function;
  },
 
  getUpdatedChoices: function() {
    this.startIndicator ();
    this.xajax_function (this.getToken ());
  }
}); 
 

Que en realidad es un "function.autocompleter", ya que el tercer parámetro que hay que mandarle es un callback a la función xajax que hará la magia (xajax_function). Esta función recibe como parametro el tocken escrito en el input.

Las funciones xajax devuelven siempre un xml, pero la función dentro del completer que actualiza las funciones disponibles recibe una cadena con una lista ordenada. Nuestra función xajax debe de alguna manera ejecutar esa función para actualizar la lista. Yo lo que hice fue actualizar un elemento oculto en el html y luego mandar el innerHTML a esa función (updateChoices), todo esto desde el request Xajax a fin de que instantaneamente se actualice la lista de opciones.

De ahí en fuera se puede utilizar tal como el Ajax.autocompleter, con sus parametros como callbacks y toda la onda.

Yo se que todo esto suena muy críptico, nunca he sido bueno explicando cosas, pero espero de una pequeña luz sobre por donde se puede hacer. Si alguien tiene alguna duda puede mandarme un msg, y les envió mi código.

Voila!