Browse Source

Reworks search field. Fixes #239

Uses the correct EOLs now, fixes iPad keyboard issue.
Kevin Brown 13 years ago
parent
commit
c58cd12829
1 changed files with 52 additions and 18 deletions
  1. 52 18
      select2.js

+ 52 - 18
select2.js

@@ -1089,6 +1089,8 @@
              this makes sure the search field is focussed even if the current event would blur it */
              this makes sure the search field is focussed even if the current event would blur it */
             window.setTimeout(this.bind(function () {
             window.setTimeout(this.bind(function () {
                 this.search.focus();
                 this.search.focus();
+                // reset the value so IE places the cursor at the end of the input box
+                this.search.val(this.search.val());
             }), 10);
             }), 10);
         },
         },
 
 
@@ -1203,7 +1205,7 @@
         // single
         // single
         focus: function () {
         focus: function () {
             this.close();
             this.close();
-            this.search.focus();
+            this.container.focus();
         },
         },
 
 
         // single
         // single
@@ -1214,7 +1216,7 @@
         // single
         // single
         cancel: function () {
         cancel: function () {
             this.parent.cancel.apply(this, arguments);
             this.parent.cancel.apply(this, arguments);
-            this.search.focus();
+            this.container.focus();
         },
         },
 
 
         // single
         // single
@@ -1253,18 +1255,6 @@
                             killEvent(e);
                             killEvent(e);
                             return;
                             return;
                     }
                     }
-                } else {
-                    if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
-                        return;
-                    }
-
-                    this.open();
-
-                    if (e.which === KEY.ENTER) {
-                        // do not propagate the event otherwise we open, and propagate enter which closes
-                        killEvent(e);
-                        return;
-                    }
                 }
                 }
             }));
             }));
 
 
@@ -1273,7 +1263,7 @@
 
 
                 if (this.opened()) {
                 if (this.opened()) {
                     this.close();
                     this.close();
-                    this.search.focus();
+                    this.container.focus();
                 } else if (this.enabled) {
                 } else if (this.enabled) {
                     this.open();
                     this.open();
                 }
                 }
@@ -1283,6 +1273,50 @@
             }));
             }));
 
 
             dropdown.bind("click", this.bind(function() { this.search.focus(); }));
             dropdown.bind("click", this.bind(function() { this.search.focus(); }));
+            
+            container.bind("focus", this.bind(function() {
+                // allows the container to recieve the keyup event
+                this.container.attr("tabindex", 1);
+            }));
+            
+            container.bind("blur", this.bind(function() {
+                // remove the tabindex so the tab key works properly
+                this.container.attr("tabindex", -1);
+            }));
+            
+            container.bind("keydown", this.bind(function(e) {
+                if (!this.enabled) return;
+                
+                this.container.attr("tabindex", -1);
+
+                if (e.which === KEY.PAGE_UP || e.which === KEY.PAGE_DOWN) {
+                    // prevent the page from scrolling
+                    killEvent(e);
+                    return;
+                }
+
+                if (!this.opened()) {
+                    if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
+                        return;
+                    }
+
+                    this.open();
+
+                    if (e.which === KEY.ENTER) {
+                        // do not propagate the event otherwise we open, and propagate enter which closes
+                        killEvent(e);
+                        return;
+                    }
+                    
+                    var keyWritten = String.fromCharCode(e.which).toLowerCase();
+                
+                    if (e.shiftKey) {
+                        keyWritten = keyWritten.toUpperCase();
+                    }
+                    
+                    this.search.val(keyWritten);
+                }
+            }));
 
 
             selection.delegate("abbr", "click", this.bind(function (e) {
             selection.delegate("abbr", "click", this.bind(function (e) {
                 if (!this.enabled) return;
                 if (!this.enabled) return;
@@ -1290,7 +1324,7 @@
                 killEvent(e);
                 killEvent(e);
                 this.close();
                 this.close();
                 this.triggerChange();
                 this.triggerChange();
-                this.search.focus();
+                this.container.focus();
             }));
             }));
 
 
             selection.bind("focus", this.bind(function() { this.search.focus(); }));
             selection.bind("focus", this.bind(function() { this.search.focus(); }));
@@ -1403,7 +1437,7 @@
             this.opts.element.val(this.id(data));
             this.opts.element.val(this.id(data));
             this.updateSelection(data);
             this.updateSelection(data);
             this.close();
             this.close();
-            this.search.focus();
+            this.container.focus();
 
 
             if (!equal(old, this.id(data))) { this.triggerChange(); }
             if (!equal(old, this.id(data))) { this.triggerChange(); }
         },
         },
@@ -1697,7 +1731,7 @@
         // multi
         // multi
         focus: function () {
         focus: function () {
             this.close();
             this.close();
-            this.search.focus();
+            this.container.focus();
         },
         },
 
 
         // multi
         // multi