inplaceeditor mit autocompleter
scriptaculous bietet sowohl einen inplaceeditor als auch einen autocompleter an. leider sind diese beiden jedoch separat.
falls jemand beide braucht - wie zb ich (von der firma aus) - müssen diese jedoch kombiniert werden. das ist aber kein problem.
meine variante
zwar könnten die änderungen auch direkt im quellcode von scriptaculous stattfinden, doch das ist imho eher die unschöne/unsaubere art. da man in javascript alles überschreiben kann, bietet sich diese (= meine) variante sehr gut an.
insgesamt sind 3 methoden davon betroffen, in denen kleine erweiterungen vorgenommen werden müssen.
go for it
der inplaceeditor weist den inputfeldern keine id zu. diese werden aber gebraucht, um vom autocompleter angesprochen werden zu können.
natürlich sollte der autocompleter nur solange wie nötig existieren, daher wird er nach der erstellung des inputfeldes erzeugt ...
... und nach dem editieren wieder gelöscht.
erklärung
insgesamt sind 4 selbstdefinierte variablen aktiv, die alle über die optionen des inplaceeditors mitübergeben werden können (zur konfigurierung des autocompleters).
code (html)
code (javascript)
zum abstellen des (meiner meinung nach) nervigen gelben highlight effekts fügt man diese zeilen hinzu:
falls es jemand geholfen hat, wäre ich über ein kommentar froh ;)
mfg mailo
ps: es wurde die version 1.8.1 von scriptaculous verwendet!
falls jemand beide braucht - wie zb ich (von der firma aus) - müssen diese jedoch kombiniert werden. das ist aber kein problem.
meine variante
zwar könnten die änderungen auch direkt im quellcode von scriptaculous stattfinden, doch das ist imho eher die unschöne/unsaubere art. da man in javascript alles überschreiben kann, bietet sich diese (= meine) variante sehr gut an.
insgesamt sind 3 methoden davon betroffen, in denen kleine erweiterungen vorgenommen werden müssen.
go for it
der inplaceeditor weist den inputfeldern keine id zu. diese werden aber gebraucht, um vom autocompleter angesprochen werden zu können.
Ajax.InPlaceEditor.prototype.createEditField = function() {
[...]
// mod: add id to the input field
if(this.options.acOn) fld.id = this.element.id+'_input';
this._form.appendChild(this._controls.editor);
};
[...]
// mod: add id to the input field
if(this.options.acOn) fld.id = this.element.id+'_input';
this._form.appendChild(this._controls.editor);
};
natürlich sollte der autocompleter nur solange wie nötig existieren, daher wird er nach der erstellung des inputfeldes erzeugt ...
Ajax.InPlaceEditor.prototype.enterEditMode = function(e) {
[...]
// mod: store the autocompleter element (for destroying afterwards)
if(this.options.acOn) this._acElement = new Ajax.Autocompleter(
$(this.element.id+'_input'),
this.options.acDiv,
this.options.acPath+'?'+this.options.acParam+'='+this.element.id,
this.options.acOptions
);
};
[...]
// mod: store the autocompleter element (for destroying afterwards)
if(this.options.acOn) this._acElement = new Ajax.Autocompleter(
$(this.element.id+'_input'),
this.options.acDiv,
this.options.acPath+'?'+this.options.acParam+'='+this.element.id,
this.options.acOptions
);
};
... und nach dem editieren wieder gelöscht.
Ajax.InPlaceEditor.prototype.leaveEditMode = function() {
// mod: destroy the autocompleter element
if(this.options.acOn) delete this._acElement;
[...]
};
// mod: destroy the autocompleter element
if(this.options.acOn) delete this._acElement;
[...]
};
erklärung
insgesamt sind 4 selbstdefinierte variablen aktiv, die alle über die optionen des inplaceeditors mitübergeben werden können (zur konfigurierung des autocompleters).
- acOn: boolean - zum ein- und ausschalten des autocompleters
- acDiv: string - der div-container für die liste des autocompleters
- acPath: string - pfad zur datei, die die autocompleter-ergebnisse zurückliefert
- acParam: string - zusätzliche parameter, die zur obigen datei mitübergeben werden
code (html)
<input type="text" id="myElement" name="myElement" />
<div id="inplaceEditorList" style="display:none;"></div>
<div id="inplaceEditorList" style="display:none;"></div>
code (javascript)
<script type="text/javascript">
new Ajax.InPlaceEditor('myElement','file.php',{
acDiv:'inplaceEditorList',
acPath:'autocompleterList.php',
acParam:'elem',
acOn:1
});
</script>
new Ajax.InPlaceEditor('myElement','file.php',{
acDiv:'inplaceEditorList',
acPath:'autocompleterList.php',
acParam:'elem',
acOn:1
});
</script>
zum abstellen des (meiner meinung nach) nervigen gelben highlight effekts fügt man diese zeilen hinzu:
Ajax.InPlaceEditor.DefaultOptions.highlightEndColor = 'transparent';
Ajax.InPlaceEditor.DefaultOptions.highlightColor = 'transparent';
Ajax.InPlaceEditor.DefaultOptions.highlightColor = 'transparent';
falls es jemand geholfen hat, wäre ich über ein kommentar froh ;)
mfg mailo
ps: es wurde die version 1.8.1 von scriptaculous verwendet!
mailo - 3. Aug, 21:00
