Add caching to the Futon autocompletion feature, and fix the positioning code.

git-svn-id: https://svn.apache.org/repos/asf/couchdb/trunk@736387 13f79535-47bb-0310-9956-ffa450edef68

3 files changed, 31 insertions, 16 deletions

diff --git a/share/www/script/futon.browse.js b/share/www/script/futon.browse.js
index ee8da4e6..db899df3 100644
--- a/share/www/script/futon.browse.js
+++ b/share/www/script/futon.browse.js
@@ -335,7 +335,7 @@
                   var matches = [];
                   for (var i = 0; i < docs.rows.length; i++) {
                     var docName = docs.rows[i].id.substr(8);
-                    if (docName.substr(0, text.length) == text) {
+                    if (docName.indexOf(text) == 0) {
                       matches[i] = docName;
                     }
                   }
@@ -350,7 +350,7 @@
                   var matches = [];
                   if (!doc.views) return;
                   for (var viewName in doc.views) {
-                    if (viewName.substr(0, text.length) == text) {
+                    if (viewName.indexOf(text) == 0) {
                       matches.push(viewName);
                     }
                   }
diff --git a/share/www/script/jquery.suggest.js b/share/www/script/jquery.suggest.js
index 3a9d0ead..da592317 100644
--- a/share/www/script/jquery.suggest.js
+++ b/share/www/script/jquery.suggest.js
@@ -15,13 +15,15 @@
   suggest = function(elem, options) {
     var timer = null;
     var prevVal = null;
+    var cache = {};
+    var cacheKeys = [];
 
     var input = $(elem).attr("autocomplete", "off");
-    var offset = input.offset();
-    var dropdown = $('<ul style="z-index: 10000"></ul>')
-      .addClass(options.dropdownClass).appendTo("body").css({
-        top: (offset.top + elem.offsetHeight) + "px",
-        left: offset.left + "px",
+    var pos = input.position();
+    var dropdown = $('<ul style="display: none; position: absolute; z-index: 10000"></ul>')
+      .addClass(options.dropdownClass).insertAfter(input).css({
+        top: (pos.top + input.outerHeight()) + "px",
+        left: pos.left + "px",
         minWidth: input.css("width")
       });
 
@@ -65,9 +67,20 @@
       var newVal = $.trim(input.val());
       if (force || newVal != prevVal) {
         if (force || newVal.length >= options.minChars) {
-          options.callback.apply(elem, [$.trim(input.val()), function(items, render) {
-            show(items, render);
-          }]);
+          if (options.cache && cache.hasOwnProperty(newVal)) {
+            show(cache[newVal].items, cache[newVal].render);
+          } else {
+            options.callback.apply(elem, [newVal, function(items, render) {
+              if (options.cache) {
+                if (cacheKeys.length >= options.cacheLimit) {
+                  delete cache[cacheKeys.shift()];
+                }
+                cache[newVal] = {items: items, render: render};
+                cacheKeys.push(newVal);
+              }
+              show(items, render);
+            }]);
+          }
         } else {
           dropdown.hide();
         }
@@ -91,7 +104,7 @@
         item.appendTo(dropdown);
       }
       dropdown.slideDown("fast");
-      dropdown.children('li').click(function(e) {
+      dropdown.children("li").click(function(e) {
         $(this).addClass("selected");
         commit();
       });
@@ -133,8 +146,10 @@
 
   $.fn.suggest = function(callback, options) {
     options = $.extend({
+      cache: true,
+      cacheLimit: 10,
       callback: callback,
-      delay: 100,
+      delay: 250,
       dropdownClass: "suggest-dropdown",
       minChars: 1,
       select: null
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index c36892dd..0d63d934 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -142,8 +142,8 @@ div.grippie { background: #e9e9e9 url(../image/grippie.gif) 50% 50% no-repeat;
 /* Suggest results */
 
 ul.suggest-dropdown { border: 1px solid #999; background-color: #eee;
-  padding: 0; margin: 0; list-style: none; opacity: .85; position: absolute;
-  z-index: 10000; display: none; -webkit-box-shadow: 2px 2px 10px #333;
+  padding: 0; margin: 0; list-style: none; opacity: .85;
+  -webkit-box-shadow: 2px 2px 10px #333;
 }
 ul.suggest-dropdown li { padding: 2px 5px; white-space: nowrap; color: #101010;
   text-align: left;
@@ -256,8 +256,8 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 #dialog fieldset th { color: #999; font-weight: bold;
   text-align: right;
 }
-#dialog fieldset input { background: #e9e9e9; vertical-align: middle; }
-#dialog fieldset input.error { background: #f9e4e4; }
+#dialog fieldset input { background-color: #e9e9e9; vertical-align: middle; }
+#dialog fieldset input.error { background-color: #f9e4e4; }
 #dialog fieldset div.error { padding-top: .3em; color: #b33; }
 #dialog .buttons { padding: 0 .5em .5em; text-align: right; }
 #dialog .buttons button { background: #444; border: 1px solid #aaa;