Performance and Quality of Life

Now debouncing input from user, this should help performance when there
is a lot of data. This delay can be controlled by the debounceMS option
in the filter widget.

The widget now watches for the input being reset by clicking the X in
the search box.

Author: mlh758

src/jquery.multiselect.filter.js

@@ -16,13 +16,34 @@
 (function($) {
   var rEscape = /[\-\[\]{}()*+?.,\\\^$|#\s]/g;
 
+  //Courtesy of 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);
+      }
+    };
+  }
+
   $.widget('ech.multiselectfilter', {
 
     options: {
       label: 'Filter:',
       width: null, /* override default width set in css file (px). null will inherit */
       placeholder: 'Enter keywords',
-      autoReset: false
+      autoReset: false,
+      debounceMS: 250
     },
 
     _create: function() {
@@ -49,8 +70,8 @@
             e.preventDefault();
           }
         },
-        keyup: $.proxy(this._handler, this),
-        click: $.proxy(this._handler, this)
+        input: $.proxy(debounce(this._handler, opts.debounceMS), this),
+        search: $.proxy(this._handler, this)
       });
 
       // cache input values for searching

tests/unit/filter.js

@@ -14,7 +14,7 @@
   }
 
   function searchFor(term) {
-    input.val(term).trigger("keyup");
+    input.val(term).trigger("search");
   }
 
   function triggerClick() {
@@ -31,16 +31,16 @@
   module("filter widget - multiple select", {
     setup: function() {
       el = $('<select multiple>' +
-        '<option></option>' + 
-        '<option value="foo">testffoooo</option>' + 
-        '<option value="bar">testbbaarr</option>' + 
-        '<option value=" baz ">testbbaazz</option>' + 
-        '<option value="qux">testquxtest</option>' + 
-        '<option value="10">ten</option>' + 
-        '<option value="100">one hundred</option>' + 
-        '<option value="5">five</option>' + 
-        '<option>a test with word boundaries</option>' + 
-        '<option>special regex !^$()//-|{}/: characters</option>' + 
+        '<option></option>' +
+        '<option value="foo">testffoooo</option>' +
+        '<option value="bar">testbbaarr</option>' +
+        '<option value=" baz ">testbbaazz</option>' +
+        '<option value="qux">testquxtest</option>' +
+        '<option value="10">ten</option>' +
+        '<option value="100">one hundred</option>' +
+        '<option value="5">five</option>' +
+        '<option>a test with word boundaries</option>' +
+        '<option>special regex !^$()//-|{}/: characters</option>' +
         '</option>');
 
       el.appendTo(document.body);