debounce auto-submit ajax calls

static/js/utils/form.js

@@ -304,7 +304,8 @@
 
   var autoSubmitInputUtil = function(element) {
     var form;
-    
+    var debouncedHandler;
+
     function autoSubmit() {
       form.submit();
     }
@@ -319,15 +320,17 @@
         throw new Error('Could not determine associated form for auto submit input');
       }
 
-      element.addEventListener('change', autoSubmit);
-      
+      debouncedHandler = debounce(autoSubmit, 500);
+
+      element.addEventListener('input', debouncedHandler);
+
       element.classList.add(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS);
 
       return {
         name: AUTO_SUBMIT_INPUT_UTIL_NAME,
         element: element,
-        destroy: function() { 
-          element.removeEventListener('change', autoSubmit);
+        destroy: function() {
+          element.removeEventListener('input', debouncedHandler);
         },
       };
     }
@@ -471,7 +474,7 @@
       };
     }
 
-    return init();   
+    return init();
   };
 
   formUtilities.push({
@@ -480,6 +483,22 @@
     setup: datepickerUtil,
   });
 
+  // debounce function, taken from Underscore.js
+  function debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+    };
+  }
+
   // register the collected form utilities
   if (UtilRegistry) {
     formUtilities.forEach(UtilRegistry.register);