script.aculo.us - Autocompleter bei Mausklick und andere Ereignisse

 

Gegeben:

• script.aculo.us
• prototypejs

Gewünschte Funktion:

Der Autocompleter soll bei Doppelklick in das Input-Feld bereits einen Request abschicken und das Ergebnis anzeigen.

IST-Zustand:

Aktuell reagiert der Autocompleter von script.aculo.us nur auf das Ereignis onBlur und onKeyPress.
siehe lib/controls.js Zeile ~90:

Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));

Es wäre möglich zzgl. die Zeile >>Event.observe(this.element, 'dblclick', this.onBlur.bindAsEventListener(this));<< einzufügen, allerdings ist ein Update der Dateien dann kaum mehr möglich.

Lösung:

Damit der Autocompleter auf ein Input-Feld reagiert, müsste bereits folgender JS-Code vorhanden sein:

<script type="text/javascript">
  document.observe('dom:loaded',function(){
    new Ajax.Autocompleter(
                                             'ldap_cn',
                                             'autocomplete_dbtables',
                                             '../autocomplete/ldap_search.php',
                                            {
                                              paramName:'cn',
                                              frequency:0.1,
                                              minChars:2
                                            }
                                          )
  });
</script>

Für den Aufbau und die vorhandenen Parameter bitte die Docu lesen ...

Damit nun der Autocompleter auf Doppelklick im Input-Feld reagiert, muss das JS wie nachfolgend geändert werden:

<script type="text/javascript">
  document.observe('dom:loaded',function(){
    var myAC = new Ajax.Autocompleter(
                                             'ldap_cn',
                                             'autocomplete_dbtables',
                                             '../autocomplete/ldap_search.php',
                                            {
                                              paramName:'cn',
                                              frequency:0.1,
                                              minChars:2
                                            }
                                          )

  Event.observe(myAC.element, 'dblclick', myAC.onKeyPress.bindAsEventListener(myAC));
  });
</script>

Somit wird das Autocompleter-Objekt in der Variable myAC gespeichert und in der nachfolgenden Anweisung direkt auf die Eigenschaften und Methoden des Objektes zugegriffen.

Hinweis:

Damit das Ereignis dblclick und auch andere Ereignisse funktionieren, muss im Input-Feld die Mindestanzahl an Zeichen, die durch den Parameter minChars angegeben ist, stehen. Somit sollte auf jeden Fall ein kleiner Dummytext z.B. "bitte wählen Sie" im Input-Feld stehen.