diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js
index b29b6ed7e..436b4a2c2 100644
--- a/IPython/frontend/html/notebook/static/js/codecell.js
+++ b/IPython/frontend/html/notebook/static/js/codecell.js
@@ -10,6 +10,8 @@
 //============================================================================
 
 var IPython = (function (IPython) {
+    "use strict";
+
     var utils = IPython.utils;
 
     var CodeCell = function (notebook) {
@@ -22,8 +24,6 @@ var IPython = (function (IPython) {
         this.tooltip_timeout = null;
         this.clear_out_timeout = null;
         IPython.Cell.apply(this, arguments);
-        var that = this;
-        this.ccc = new IPython.Completer(function(ed, callback){that.requestCompletion(ed, callback)});
     };
 
 
@@ -41,16 +41,18 @@ var IPython = (function (IPython) {
             mode: 'python',
             theme: 'ipython',
             readOnly: this.read_only,
-            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this),
+            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
         });
-        var that = this;
-        ccm = this.code_mirror;
-        ccc = this.ccc;
         input.append(input_area);
         var output = $('<div></div>').addClass('output vbox');
         cell.append(input).append(output);
         this.element = cell;
         this.collapse();
+
+        // construct a completer
+        // And give it the function to call to get the completion list
+        var that = this;
+        this.completer = new IPython.Completer(this.code_mirror,function(callback){that.requestCompletion(callback)});
     };
 
     //TODO, try to diminish the number of parameters.
@@ -79,8 +81,8 @@ var IPython = (function (IPython) {
         // note that we are comparing and setting the time to wait at each key press.
         // a better wqy might be to generate a new function on each time change and
         // assign it to CodeCell.prototype.request_tooltip_after_time
-        tooltip_wait_time = this.notebook.time_before_tooltip;
-        tooltip_on_tab    = this.notebook.tooltip_on_tab;
+        var tooltip_wait_time = this.notebook.time_before_tooltip;
+        var tooltip_on_tab    = this.notebook.tooltip_on_tab;
         var that = this;
         // whatever key is pressed, first, cancel the tooltip request before
         // they are sent, and remove tooltip if any
@@ -134,8 +136,7 @@ var IPython = (function (IPython) {
                 return true;
             } else {
                 event.stop();
-                this.ccc.startCompletionFor(this.code_mirror);
-
+                this.completer.startCompletion();
                 return true;
             };
         } else if (event.keyCode === 8 && event.type == 'keydown') {
@@ -263,11 +264,10 @@ var IPython = (function (IPython) {
     };
 
     // As you type completer
-    CodeCell.prototype.requestCompletion= function(ed,callback)
+    CodeCell.prototype.requestCompletion= function(callback)
     {
         this._compcallback = callback;
-        this._editor = ed;
-        var cur = ed.getCursor();
+        var cur = this.code_mirror.getCursor();
         var pre_cursor = this.code_mirror.getRange({line:cur.line,ch:0},cur);
         pre_cursor.trim();
         // Autocomplete the current line.
@@ -281,11 +281,15 @@ var IPython = (function (IPython) {
         // let's build a function that wrap all that stuff into what is needed for the
         // new completer:
         //
-        var cur = this._editor.getCursor();
-        res = CodeMirror.contextHint(this._editor);
-        for( i=0; i< matches.length ; i++)
+        var cur = this.code_mirror.getCursor();
+        var res = CodeMirror.contextHint(this.code_mirror);
+        
+        // append the introspection result, in order, at
+        // at the beginning of the table and compute the replacement rance
+        // from current cursor positon and matched_text length.
+        for(var i= matches.length-1; i>=0 ;--i)
         {
-            res.push(
+            res.unshift(
                 {
                     str  : matches[i],
                     type : "introspection",
@@ -295,7 +299,6 @@ var IPython = (function (IPython) {
             )
         }
         this._compcallback(res);
-
     };
 
 
@@ -343,7 +346,7 @@ var IPython = (function (IPython) {
 
 
     CodeCell.prototype.append_pyout = function (json, dynamic) {
-        n = json.prompt_number || ' ';
+        var n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
         this.append_mime_type(json, toinsert, dynamic);
diff --git a/IPython/frontend/html/notebook/static/js/completer.js b/IPython/frontend/html/notebook/static/js/completer.js
index 8c05cad72..ccc661ca2 100644
--- a/IPython/frontend/html/notebook/static/js/completer.js
+++ b/IPython/frontend/html/notebook/static/js/completer.js
@@ -35,7 +35,7 @@ var IPython = (function(IPython ) {
     function sharedStart(B){
             if(B.length == 1){return B[0]}
             var A = new Array()
-            for(i=0; i< B.length; i++)
+            for(var i=0; i< B.length; i++)
             {
                A.push(B[i].str); 
             }
@@ -47,6 +47,7 @@ var IPython = (function(IPython ) {
                 while(s && tem2.indexOf(tem1) == -1){
                     tem1 = tem1.substring(0, --s);
                 }
+                if (tem1 == "" ){return null;}
                 return { str  : tem1,
                          type : "computed",
                          from : B[0].from,
@@ -57,19 +58,18 @@ var IPython = (function(IPython ) {
         }
 
     // user to nsert the given completion
-    var Completer = function(getHints) {
-
+    var Completer = function(editor,getHints) {
+        this.editor = editor;
         this.hintfunc = getHints;
         // if last caractere before cursor is not in this, we stop completing
         this.reg = /[A-Za-z.]/;
     }
 
-    Completer.prototype.startCompletionFor = function(ed)
+    Completer.prototype.startCompletion = function()
     {
         // call for a 'first' completion, that will set the editor and do some 
         // special behaviour like autopicking if only one completion availlable
         //
-        this.editor = ed;
         if (this.editor.somethingSelected()) return;
         this.done = false;
         // use to get focus back on opera
@@ -101,7 +101,7 @@ var IPython = (function(IPython ) {
         // lets assume for now only one source
         //
         var that = this;
-        this.hintfunc(this.editor,function(result){that._resume_completion(result)});
+        this.hintfunc(function(result){that._resume_completion(result)});
     }
     Completer.prototype._resume_completion = function(results)
     {
@@ -135,7 +135,9 @@ var IPython = (function(IPython ) {
         this.complete = $('<div/>').addClass('completions');
         this.complete.attr('id','complete');
 
-        this.sel = $('<select/>').attr('multiple','true');
+        this.sel = $('<select/>')
+                .attr('multiple','true')
+                .attr('size',Math.min(10,this.raw_result.length));
         var pos = this.editor.cursorCoords();
 
         // TODO: I propose to remove enough horizontal pixel
@@ -205,7 +207,13 @@ var IPython = (function(IPython ) {
       else if (code == key.space || code == key.backspace) {this.close(); this.editor.focus();}
       else if (code == key.tab){
             //all the fastforwarding operation, 
-            this.insert(sharedStart(this.raw_result));
+            //Check that shared start is not null which can append with prefixed completion
+            // like %pylab , pylab have no shred start, and ff will result in py<tab><tab>
+            // to erase py
+            var sh = sharedStart(this.raw_result)
+            if(sh){
+                this.insert(sh);
+            }
             this.close(); 
             CodeMirror.e_stop(event);
             this.editor.focus();
diff --git a/IPython/frontend/html/notebook/static/js/context-hint.js b/IPython/frontend/html/notebook/static/js/context-hint.js
index ddde98a46..8cddb7f00 100644
--- a/IPython/frontend/html/notebook/static/js/context-hint.js
+++ b/IPython/frontend/html/notebook/static/js/context-hint.js
@@ -1,6 +1,7 @@
 // highly adapted for codemiror jshint
 
 (function () {
+  "use strict";
   function forEach(arr, f) {
     for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
   }
@@ -57,7 +58,7 @@
 
     // append to arry if not already 
     // (here we do it )
-    for( c in candidates )
+    for( var c in candidates )
     {
         if(candidates[c].length >= 1){
         maybeAdd(candidates[c]);}
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index f7ba06d0d..30f7718ac 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -220,6 +220,7 @@ data-notebook-id={{notebook_id}}
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/context-hint.js") }} charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
@@ -235,4 +236,3 @@ data-notebook-id={{notebook_id}}
 <script src="{{ static_url("codemirror/lib/util/simple-hint.js") }} charset="utf-8"></script>
 
 {% end %}
-