From 9d7a19d6249b23845c0e9b76eeb90e4a1bf829fc Mon Sep 17 00:00:00 2001
From: Steve Purcell <steve@sanityinc.com>
Date: Sun, 29 Sep 2013 17:40:34 +0100
Subject: [PATCH] Debounce the package filter so search is more responsive

---
 html/js/melpa.js        | 24 ++++++++++++++++++++++++
 html/partials/list.html |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/html/js/melpa.js b/html/js/melpa.js
index ecaa5005..3a141bb3 100644
--- a/html/js/melpa.js
+++ b/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>' +
diff --git a/html/partials/list.html b/html/partials/list.html
index bf7bd136..3995d6d7 100644
--- a/html/partials/list.html
+++ b/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">