Add typeahead database search

2 files changed, 47 insertions, 3 deletions

diff --git a/src/fauxton/app/modules/databases/views.js b/src/fauxton/app/modules/databases/views.js
index 673af517e..b0fa1febf 100644
--- a/src/fauxton/app/modules/databases/views.js
+++ b/src/fauxton/app/modules/databases/views.js
@@ -20,8 +20,10 @@ function(app, FauxtonAPI) {
 
   Views.List = FauxtonAPI.View.extend({
     template: "databases/list",
+    dbLimit: 10,
     events: {
-      "click button.all": "selectAll"
+      "click button.all": "selectAll",
+      "submit form.database-search": "switchDatabase"
     },
 
     initialize: function(options) {
@@ -34,6 +36,19 @@ function(app, FauxtonAPI) {
       };
     },
 
+    switchDatabase: function(event) {
+      event.preventDefault();
+      var dbname = this.$el.find("input.search-query").val();
+
+      if (dbname) {
+        // TODO: switch to using a model, or Databases.databaseUrl()
+        // Neither of which are in scope right now
+        // var db = new Database.Model({id: dbname});
+        var url = ["/database/", dbname, "/_all_docs?limit=10"].join('');
+        FauxtonAPI.navigate(url);
+      }
+    },
+
     beforeRender: function() {
       this.collection.each(function(database) {
         this.insertView("table.databases tbody", new Views.Item({
@@ -42,6 +57,34 @@ function(app, FauxtonAPI) {
       }, this);
     },
 
+    afterRender: function() {
+      var dbLimit = this.dbLimit;
+      var ajaxReq;
+
+      this.$el.find("input.search-query").typeahead({
+        source: function(query, process) {
+          console.log("SEARCHING FOR: "+query, process);
+          var url = [
+            app.host,
+            "/_all_dbs?startkey=%22",
+            query,
+            "%22&endkey=%22",
+            query,
+            "\u9999%22&limit=",
+            dbLimit
+          ].join('');
+          if (ajaxReq) ajaxReq.abort();
+          ajaxReq = $.ajax({
+            url: url,
+            dataType: 'json',
+            success: function(data) {
+              process(data);
+            }
+          });
+        }
+      });
+    },
+
     selectAll: function(evt){
       $("input:checkbox").attr('checked', !$(evt.target).hasClass('active'));
     }
diff --git a/src/fauxton/app/templates/databases/list.html b/src/fauxton/app/templates/databases/list.html
index 009ffc2f6..ee187c5d2 100644
--- a/src/fauxton/app/templates/databases/list.html
+++ b/src/fauxton/app/templates/databases/list.html
@@ -3,9 +3,10 @@
     <button type="button" class="btn all" data-toggle="button">✓ All</button>
     <a class="btn btn-small disabled delete"><i class="icon-trash"></i></a>
   </div>
-  <!--<form class="navbar-form pull-right">
+
+  <form class="navbar-form pull-right database-search">
     <input type="text" class="search-query" placeholder="Search by database name">
-  </form>-->
+  </form>
 </div>
 <table class="databases table table-striped">
   <tbody>