Arrow keys move down into the autocomplete results from the text inpu…

…t, or up out of the list
rfletcher · May 6, 2009 · 969efbd · 969efbd
1 parent 3fd593a
commit 969efbd
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/src/lib/Tagbox.Autocomplete.js b/src/lib/Tagbox.Autocomplete.js
@@ -119,6 +119,34 @@ Tagbox.Autocomplete = Class.create( {
         return this.results[index];
     },
 
+    /**
+     * Tagbox.Autocomplete#handleKey() -> Boolean
+     *
+     * Autocomplete keyboard event handler.  Handles navigation of the results list
+     * via arrow keys, for example.
+     **/
+    handleKey: function( e ) {
+        if( ! this.tagbox.currentIsInput() ) {
+            return;
+        }
+
+        switch( e.which ? e.which : e.keyCode ) {
+            case Event.KEY_DOWN:
+                this.next();
+                e.stop();
+                return true;
+            case Event.KEY_UP:
+                this.previous();
+                e.stop();
+                return true;
+            case Event.KEY_ESC:
+                if( this.element.visible() ) {
+                    this.hide();
+                    return true;
+                }
+        }
+    },
+
     /**
      * Tagbox.Autocomplete#hide() -> undefined
      *
@@ -177,9 +205,7 @@ Tagbox.Autocomplete = Class.create( {
             } while( target && target.hasClassName( 'tagbox-disabled' ) );
         }
 
-        if( target ) {
-            return this.highlight( target );
-        }
+        return this.highlight( target );
     },
 
     /**
@@ -207,25 +233,10 @@ Tagbox.Autocomplete = Class.create( {
      * Add event handlers to the Tagbox to show/hide the autocomplete list.
      **/
     registerEventHandlers: function() {
-        document.observe( Prototype.Browser.Gecko ? 'keypress' : 'keydown', function( e ) {
-            if( ! this.tagbox.currentIsInput() ) {
-                return;
-            }
-
-            switch( e.which ? e.which : e.keyCode ) {
-                case Event.KEY_DOWN:
-                    this.next();
-                    break;
-                case Event.KEY_UP:
-                    this.previous();
-                    break;
-                case Event.KEY_ESC:
-                    if( this.element.visible() ) {
-                        this.hide();
-                    }
-                    break;
-            }
-        }.bind( this ) ).observe( 'keyup', function( e ) {
+        document.observe(
+            Prototype.Browser.Gecko ? 'keypress' : 'keydown',
+            this.handleKey.bindAsEventListener( this )
+        ).observe( 'keyup', function( e ) {
             if( ! this.tagbox.currentIsInput() ) {
                 return;
             }

diff --git a/src/lib/Tagbox.js b/src/lib/Tagbox.js
@@ -550,9 +550,7 @@ var Tagbox = Class.create( {
             }
 
             // a little cross-browser compatibility
-            var key = e.which ? e.which : e.keyCode;
-
-            switch( key ) {
+            switch( e.which ? e.which : e.keyCode ) {
                 // let the user tab out of the tagbox to next input
                 case Event.KEY_TAB:
                     if( this.currentIsTag() ) {
@@ -634,7 +632,8 @@ var Tagbox = Class.create( {
      **/
     registerInputEventHandlers: function( input ) {
         input.observe( 'keypress', function( e ) {
-            if( this.isDelimiterKeypress( e ) ) {
+            if( ! ( this.autocomplete && this.autocomplete.handleKey( e ) ) &&
+                this.isDelimiterKeypress( e ) ) {
                 e.stop();
                 this.addTagFromInput();
             }