diff --git a/static/js/utils/form.js b/static/js/utils/form.js index f19b27f52..da02abd5d 100644 --- a/static/js/utils/form.js +++ b/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);