IE: Change Event und Autocompletion

by Haf
17.01.2009
 

Im IE (7) gibt es Probleme mit dem Change-Event bei einem Input-Feld, wenn dies auch Autocompletion von script.aculo.us[1] beinhaltet.

Wird ein Input-Feld bezüglich den Veränderungen beobachtet ($('field').observe('change', ...')) wird beim IE dieser Event dann gefeuert, wenn der Focus das Feld verlässt.

Hat das Input-Feld nun auch Autocompletion, wird dieser Event nicht mehr gefeuert, wenn, der Nutzer mit Tab oder Enter ein Eintrag aus der Autocompletion-Liste auswählt.

Hier muss man den Event selbst feuern, wenn der Eintrag aus der Autocompletion-Liste ausgewählt wurde. Da man bei Prototype keine native Events abfeuern kann, nutzt man die eigenen Events [2] nutzen.

script.aculo.us Autocompletion ruft die Funktion selectEntry wenn ein Eintrag ausgewählt wurde. Nun kann man diese Funktion überschreiben und nach der Auswahl das nötige Event feuern. Natürlich nur beim IE ansonsten hat man das Event doppel. In dem folgenden Listing wird dies beispielhaft für Autocompleter.Local gemacht

var al = new Autocompleter.Local('field', 'auto_box', localResults, { });
    // overwrite the selecEntry() function to fires the change event in IE
    al.selectEntry = function() {
       // the next two lines are the same from the original function!
       this.active = false;
       this.updateElement(this.getCurrentEntry());

       // the additional functionality
       // fire the event only for IE, cause IE does not fire this existing change event
       if(Prototype.Browser.IE) {
          var elem = $('field');
          elem.fire('clazz:event', ...);
       }
};

Links:
[1] script.aculo.us
[2] Prototype Element.fire

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • MisterWong
  • Technorati
  • Yigg
No Comments

Leave A Comment

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS