diff --git a/client/query/autocomplete.js b/client/query/autocomplete.js
index e918390..b160dcb 100644
--- a/client/query/autocomplete.js
+++ b/client/query/autocomplete.js
@@ -23,22 +23,18 @@
 
       var element = $('<div></div>');
       element.addClass('list-group')
+      .addClass('autoComplete')
       .css({
-        'border-top-left-radius': 0,
-        'border-top-right-radius': 0,
-        'width': this.width(),
-        'position': 'absolute',
-        'top': this.parent().height(),
-        'display': 'none',
-        'max-height': '500px',
-        'overflow-y': 'auto'
+        'top': this.parent().height()
       });
 
-      this.focus(function(){
-        element.slideDown();
-      }).blur(function(){
-        element.slideUp();
-      }).before(element);
+//      this.focus(function(){
+//        element.slideDown();
+//      }).blur(function(){
+//        element.slideUp();
+//      }).before(element);
+
+      this.after(element);
 
       var getSuggestions = function(current, callback){
         callback(suggestions.reduce(function(prev, suggestion){
@@ -76,7 +72,8 @@
             element.find(':first-child').addClass('active');
           } else {
             if (!active.is(':first-child')){
-              active.removeClass('active').prev().addClass('active');
+              var top = active.removeClass('active').prev().addClass('active').offset().top;
+              active.parent().stop().animate({scrollTop: top}, 500);
             }
           }
           e.preventDefault();
@@ -88,7 +85,8 @@
             element.find(':first-child').addClass('active');
           } else {
             if (!active.is(':last-child')){
-              active.removeClass('active').next().addClass('active');
+              var top = active.removeClass('active').next().addClass('active').offset().top;
+              active.parent().stop().animate({scrollTop: top}, 500);
             }
           }
           e.preventDefault();
@@ -104,7 +102,7 @@
 
           case 9: //Tab
           getSuggestions(input.val(), setAutoComplete);
-          e.preventDefault(); //Don't print tab
+          e.preventDefault(); //Don't print tab or select a different element.
           break;
         }
 
diff --git a/client/query/query.js b/client/query/query.js
index af01a58..3993c43 100644
--- a/client/query/query.js
+++ b/client/query/query.js
@@ -201,6 +201,14 @@
       scope.face.expressInterest(new Interest(name).setInterestLifetimeMilliseconds(5000),
       function(interest, data){
         console.log("Autocomplete query return: ", data.getContent().toString());
+        
+        if (data.getContent().length !== 0){
+          var options = JSON.parse(data.getContent().toString().replace(/[\n\0]/g, "")).next.map(function(element){
+            return field + element;
+          });
+          callback(options);
+        }
+
       }, function(interest){
         console.warn("Interest timed out!", interest);
       });
diff --git a/client/query/query2.css b/client/query/query2.css
index 2119d4c..a9297a2 100644
--- a/client/query/query2.css
+++ b/client/query/query2.css
@@ -108,3 +108,19 @@
 #filters:not(:empty)::before {
   content: "Filters: ";
 }
+
+#search {
+  width: 500px;
+}
+
+.autoComplete {
+  max-height: 0;
+  overflow-y: auto;
+  position: absolute;
+  left: 0;
+  transition: max-height 1s;
+}
+
+*:focus ~ .autoComplete { /* If the parent detects focus on any subelement or itself */
+  max-height: 500px;
+}