Prototype & Scriptaculous - tips & tricks

Passare più campi alla funzione Ajax.Autocompleter

A chi fa uso intensivo del framework Prototype accompaganto da Scriptaculous, sarà capitata la necessità di passare più campi alla funzione Ajax.Autocompleter.
Ovviamente è capitato anche a me, e questa è la soluzione che ho addottato:

Aprite il file controls.js, andate alla riga 351 (dopo

if(this.options.defaultParams)
   this.options.parameters += '&' + this.options.defaultParams;"

) ed inserite le righe seguenti:

if(this.options.fields) {
   for (var i=0; i < this.options.fields.length; i++) {
      this.options.parameters += '&' + this.options.fields[i] + '=' + $F(this.options.fields[i]);
   }
}

A questo punto, vi basta aggiungere alla chiamata di Ajax.Autocompleter il parametro fileds ed il gioco è fatto.
Ecco un esempio:

new Ajax.Autocompleter('campo', 'campo_suggest', 'xml/xml_suggest_campo.php', { fields: ['id_altro_campo'] });

Ajax.Autocompleter attivazione al doppio click

Ho esteso le funzionalità di Ajax.Autocompleter permettendo l'apparizione dei suggerimenti anche a campo vuoto tramite il doppio click sul campo.

Se siete interessati, ecco come fare:

 

Aprite il file controls.js ed andate alla riga 88, qui inserite il seguente codice

// credits Riccardo Slanzi | http://www.riccardoslanzi.com
Event.observe(this.element, "dblclick", this.onDblClick.bindAsEventListener(this));

Fatto questo, andate alla riga 301 ed inserite le righe di codice seguenti:

// credits Riccardo Slanzi | http://www.riccardoslanzi.com
onDblClick: function() {
   this.changed = false;
	this.hasFocus = true;
	this.startIndicator();
	this.getUpdatedChoices();
},

Fatto questo, aprite la vostra pagina con il campo Ajax.Autoupdater e provate a farci doppio click sopra!

Ulteriore modifica al doppio click

Dopo aver implementato il doppio click in Ajax.Autocompleter e vista la comodità di tale funzione, ho deciso di migliorarlo eliminando il fastidio di dover svuotare a mano il campo autocompletato nel caso di un secondo doppio click.

Come fare? Semplice! Se avete già implementato il doppio click, andate alla riga 303 ed inserite il seguente codice:

this.element.value = ""; // al doppio click svuoto il campo!

Quindi il blocco completo di codice per il doppio click sarà:

onDblClick: function() {
   this.element.value = ""; // al doppio click svuoto il campo!
   this.changed = false;
	this.hasFocus = true;
	this.startIndicator();
	this.getUpdatedChoices();
},

PS: vi pregerei di mantenere i credits intatti, grazie.