Autocompletion working with CTRL-SPACE.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -353,6 +353,19 @@ div.text_cell_render ol ol ol ol ol {list-style:lower-roman;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
+.completions {
+    position: absolute;
+    z-index: 10;
+    overflow: auto;
+    border: 1px solid black;
+}
 
+.completions select {
+    background: white;
+    outline: none;
+    border: none;
+    padding: 0px;
+    margin: 0px;
+    font-family: monospace;
+}
 
-}

IPython/frontend/html/notebook/static/js/codecell.js

@@ -10,6 +10,8 @@ var IPython = (function (IPython) {
     var CodeCell = function (notebook) {
         this.code_mirror = null;
         this.input_prompt_number = ' ';
+        this.is_completing = false;
+        this.completion_cursor = null;
         IPython.Cell.apply(this, arguments);
     };
 
@@ -43,11 +45,93 @@ var IPython = (function (IPython) {
         if (event.keyCode === 13 && event.shiftKey) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
+        } else if (event.keyCode == 32 && (event.ctrlKey || event.metaKey) && !event.altKey) {
+            event.stop();
+            var cur = editor.getCursor();
+            var line = editor.getLine(cur.line);
+            this.is_completing = true;
+            this.completion_cursor = cur;
+            IPython.notebook.complete_cell(this, line, cur.ch);
         } else {
+            if (this.is_completing && this.completion_cursor !== editor.getCursor()) {
+                this.is_completing = false;
+                this.completion_cursor = null;
+                console.log("Stopped completing early");
+            }
             return false;
         };
     };
 
+
+    CodeCell.prototype.finish_completing = function (matched_text, matches) {
+        if (!this.is_completing || matches.length === 0) {return;}
+        // console.log("Got matches", matched_text, matches);
+
+        var that = this;
+        var cur = this.completion_cursor;
+        var complete = $('<div/>').addClass('completions');
+        var select = $('<select/>').attr('multiple','true');
+        for (var i=0; i<matches.length; ++i) {
+            select.append($('<option/>').text(matches[i]));
+        }
+        select.children().first().attr('selected','true');
+        select.attr('size',Math.min(10,matches.length));
+        var pos = this.code_mirror.cursorCoords();
+        complete.css('left',pos.x+'px');
+        complete.css('top',pos.yBot+'px');
+        complete.append(select);
+
+        $('body').append(complete);
+        var done = false;
+
+        var insert = function (selected_text) {
+            that.code_mirror.replaceRange(
+                selected_text,
+                {line: cur.line, ch: (cur.ch-matched_text.length)},
+                {line: cur.line, ch: cur.ch}
+            );
+        };
+
+        var close = function () {
+            if (done) return;
+            done = true;
+            complete.remove();
+            that.is_completing = false;
+            that.completion_cursor = null;
+        };
+
+        var pick = function () {
+            insert(select.val()[0]);
+            close();
+            setTimeout(function(){that.code_mirror.focus();}, 50);
+        };
+
+        select.blur(close);
+        select.keydown(function (event) {
+            var code = event.which;
+            if (code === 13 || code === 32) {
+                // Pressing SPACE or ENTER will cause a pick
+                event.stopPropagation();
+                event.preventDefault();
+                pick();
+            } else if (code === 38 || code === 40) {
+                // We don't want the document keydown handler to handle UP/DOWN,
+                // but we want the default action.
+                event.stopPropagation();
+            } else {
+                // All other key presses simple exit completion.
+                event.stopPropagation();
+                event.preventDefault();
+                close();
+                that.code_mirror.focus();
+            }
+        });
+        // Double click also causes a pick.
+        select.dblclick(pick);
+        select.focus();
+    };
+
+
     CodeCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.focus();

IPython/frontend/html/notebook/static/js/kernel.js

@@ -18,7 +18,7 @@ var IPython = (function (IPython) {
         var msg = {
             header : {
                 msg_id : utils.uuid(),
-                username : "bgranger",
+                username : "username",
                 session: this.session_id,
                 msg_type : msg_type
             },

IPython/frontend/html/notebook/static/js/notebook.js

@@ -403,7 +403,7 @@ var IPython = (function (IPython) {
         if (msg_type === "execute_reply") {
             cell.set_input_prompt(content.execution_count);
         } else if (msg_type === "complete_reply") {
-            console.log(content);
+            cell.finish_completing(content.matched_text, content.matches);
         };
         var payload = content.payload || [];
         this.handle_payload(payload);
@@ -505,6 +505,12 @@ var IPython = (function (IPython) {
         this.scroll_to_bottom();
     };
 
+
+    Notebook.prototype.complete_cell = function (cell, line, cursor_pos) {
+        var msg_id = this.kernel.complete(line, cursor_pos);
+        this.msg_cell_map[msg_id] = cell.cell_id;
+    };
+
     // Persistance and loading