add a short delay to autocompletion requests to avoid bursting

htdocs/templates/_scripts.html

@@ -3,31 +3,48 @@
     <script src="/static/js/bootstrap3-typeahead.min.js"></script>
     <script>
 
+var typeaheadTimerId = null;
+
+doTypeahead = function(query, process) {
+  if (typeaheadTimerId) {
+    clearTimeout(typeaheadTimerId);
+  }
+  typeaheadTimerId = setTimeout(function() {
+    typeaheadCallback(query, process);
+  }, 300);
+};
+
+var entriesMap = {};
+
+typeaheadCallback = function(query, process) {
+  var typeaheadEntries = [];
+  entriesMap = {};
+  $.ajax({
+    url: "/suggest",
+    data: {term: query},
+    dataType: "json",
+    success: function(data, status, jqxhr) {
+      $.each(data, function(idx, entry) {
+        entriesMap[entry.label] = entry.book_id;
+        typeaheadEntries.push(entry.label);
+      });
+      process(typeaheadEntries);
+    }
+  });
+};
+
+typeaheadUpdater = function(item) {
+  //this.$element[0].value = entriesMap[item];
+  //this.$element[0].form.submit();
+  var bookUrl = '/book/' + entriesMap[item];
+  window.location.href = bookUrl;
+  return item;
+};
+
 $(document).ready(function() {
   $("#search_field").typeahead({
-    source: function(query, process) {
-      var typeaheadEntries = [];
-      entriesMap = {};
-      $.ajax({
-        url: "/suggest",
-        data: {term: query},
-        dataType: "json",
-        success: function(data, status, jqxhr) {
-          $.each(data, function(idx, entry) {
-            entriesMap[entry.label] = entry.book_id;
-            typeaheadEntries.push(entry.label);
-          });
-          process(typeaheadEntries);
-        }
-      });
-    },
-    updater: function(item) {
-      //this.$element[0].value = entriesMap[item];
-      //this.$element[0].form.submit();
-      var bookUrl = '/book/' + entriesMap[item];
-      window.location.href = bookUrl;
-      return item;
-    },
+    source: doTypeahead,
+    updater: typeaheadUpdater,
     items: 12,
     autoSelect: false
   });