Debounce the package filter so search is more responsive

html/js/melpa.js

@@ -165,6 +165,30 @@
   // Directives
   //////////////////////////////////////////////////////////////////////////////
 
+  app.directive("debounceModel", ["$timeout", function($timeout) {
+    return {
+      restrict: "A",
+      require: "ngModel",
+      scope: {
+        "ngModel": "=",
+        "debounceModel": "="
+      },
+      link: function (scope, element, attrs, ngModel) {
+        //jshint unused: false
+        var delay = 250;
+        var copyValue;
+        scope.$watch(function() {
+          return ngModel.$modelValue;
+        }, function (value) {
+          $timeout.cancel(copyValue);
+          copyValue = $timeout(function() {
+            scope.debounceModel = value;
+          }, delay);
+        });
+      }
+    };
+  }]);
+
   app.directive("viewOrError", function($rootScope) {
     return {
       template: '<div>' +

html/partials/list.html

@@ -4,7 +4,7 @@
     <small ng-show="totalDownloads">(<span ng-bind="totalDownloads"></span> downloads to date)</small>
   </h2>
   <p>
-    <input type="text" ng-model="searchTerms" placeholder="Enter filter terms" autofocus>
+    <input type="text" ng-model="enteredSearchTerms" debounce-model="searchTerms" placeholder="Enter filter terms" autofocus>
     <span class="muted">&nbsp;<ng-pluralize when="{1: '1 match', 'other': '{} matches'}" count="(packages | filter:packageMatcher(searchTerms)).length"/></span>
   </p>
   <table id="package-list" class="table table-bordered table-responsive table-hover">