refacted completion dialog to handle key inputs on its own

1 files changed, 70 insertions, 49 deletions

diff --git a/completionDialog.js b/completionDialog.js
index 377f9b90..c5c6722b 100644
--- a/completionDialog.js
+++ b/completionDialog.js
@@ -6,53 +6,17 @@
 
   CompletionDialog.prototype = {
     show: function() {
-      this.showCompletions()
-    },
-    showCompletions: function(searchString, completions) {
-      this.searchString = searchString;
-      this.completions = completions;
-      if(!this.initialized) {
-        initialize.call(this);
-        this.initialized=true;
-      }
-      var container = this.getDisplayElement()
-      clearChildren(container);
-
-      if(searchString===undefined) {
-        this.container.className = "dialog";
-        createDivInside(container).innerHTML=this.options.initialSearchText || "Begin typing"
-      }
-      else {
-        this.container.className = "dialog completions";
-        var searchBar = createDivInside(container)
-        searchBar.innerHTML=searchString
-        searchBar.className="searchBar"
-
-        searchResults = createDivInside(container)
-        searchResults.className="searchResults"
-        if(completions.length<=0) {
-          var resultDiv = createDivInside(searchResults)
-          resultDiv.className="noResults"
-          resultDiv.innerHTML="No results found"
-        }
-        else {
-          for(var i=0;i<completions.length;i++) {
-            var resultDiv = createDivInside(searchResults)
-            if(i===this.currentSelection) {
-              resultDiv.className="selected"
-            }
-            resultDiv.innerHTML=this.options.renderOption(searchString, completions[i])
-          }
-        }
-      }
-
-      container.style.top=(window.innerHeight/2-container.clientHeight/2) + "px";
-      container.style.left=(window.innerWidth/2-container.clientWidth/2) + "px";
       if(!this.isShown) {
+        this.isShown=true;
+        this.query = [];
+        if(!this.initialized) {
+          initialize.call(this);
+          this.initialized=true;
+        }
         this.keyPressListener.enable();
+        render.call(this)
         clearInterval(this._tweenId);
-        this._tweenId = Tween.fade(container, 1.0, 150);
-        this.isShown=true;
+        this._tweenId = Tween.fade(this.container, 1.0, 150);
       }
     },
     hide: function() {
@@ -69,32 +33,50 @@
         this.container = createDivInside(document.body)
       }
       return this.container
+    },
+    getQueryString: function() {
+      return this.query.join("")
     }
   }
 
   var initialize = function() {
+    var self = this
     addCssToPage(completionCSS)
     
-    this.currentSelection=0;
-    var self = this;
-    this.keyPressListener = new KeyPressListener({
+    self.currentSelection=0;
+
+    self.keyPressListener = new KeyPressListener({
       keyDown: function(event) {
         var keyChar = getKeyChar(event);
         if(keyChar==="up") {
           if(self.currentSelection>0) {
             self.currentSelection-=1;
           }
-          self.showCompletions(self.searchString, self.completions) 
+          render.call(self,self.getQueryString(), self.completions) 
         }
         else if(keyChar==="down") {
           if(self.currentSelection<self.completions.length-1) {
             self.currentSelection+=1;
           }
-          self.showCompletions(self.searchString, self.completions) 
+          render.call(self,self.getQueryString(), self.completions) 
         }
         else if(event.keyCode == keyCodes.enter) {
           self.options.onSelect(self.completions[self.currentSelection])
         }
+        else if (event.keyCode == keyCodes.backspace || event.keyCode == keyCodes.deleteKey) {
+          if (self.query.length > 0) {
+            self.query.pop();
+            self.options.source(self.getQueryString(), function(completions) {
+              render.call(self, self.getQueryString(), completions)
+            })
+          }
+        } 
+        else if(keyChar!=="left" && keyChar!="right") {
+          self.query.push(keyChar);
+          self.options.source(self.getQueryString(), function(completions) {
+            render.call(self, self.getQueryString(), completions)
+          })
+        } 
         
         event.stopPropagation();
         event.preventDefault();
@@ -102,6 +84,45 @@
     })
   }
 
+  var render = function(searchString, completions) {
+    if(this.isShown) {
+      this.searchString = searchString;
+      this.completions = completions;
+      var container = this.getDisplayElement()
+      clearChildren(container);
+
+      if(searchString===undefined) {
+        this.container.className = "dialog";
+        createDivInside(container).innerHTML=this.options.initialSearchText || "Begin typing"
+      }
+      else {
+        this.container.className = "dialog completions";
+        var searchBar = createDivInside(container)
+        searchBar.innerHTML=searchString
+        searchBar.className="searchBar"
+
+        searchResults = createDivInside(container)
+        searchResults.className="searchResults"
+        if(completions.length<=0) {
+          var resultDiv = createDivInside(searchResults)
+          resultDiv.className="noResults"
+          resultDiv.innerHTML="No results found"
+        }
+        else {
+          for(var i=0;i<completions.length;i++) {
+            var resultDiv = createDivInside(searchResults)
+            if(i===this.currentSelection) {
+              resultDiv.className="selected"
+            }
+            resultDiv.innerHTML=this.options.renderOption(searchString, completions[i])
+          }
+        }
+      }
+
+      container.style.top=(window.innerHeight/2-container.clientHeight/2) + "px";
+      container.style.left=(window.innerWidth/2-container.clientWidth/2) + "px";
+    }
+  };
   var createDivInside = function(parent) {
     var element = document.createElement("div");
     parent.appendChild(element);