Clippy Lints page - Delay updating of the URL in response to search input

Update on blur, enter keypress, and a debounced delay of 1000 ms.

This keeps the URL updated, but not distractingly so.

Author: whee

util/gh-pages/index.html

@@ -501,9 +501,11 @@ <h1>Clippy Lints</h1>
                     <div class="col-12 col-md-7 search-control">
                         <div class="input-group">
                             <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label>
-                            <input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input" ng-model="search" ng-model-options="{debounce: 50}"/>
+                            <input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input"
+                                ng-model="search" ng-blur="updatePath()" ng-keyup="$event.keyCode == 13 && updatePath()"
+                                ng-model-options="{debounce: 50}" />
                             <span class="input-group-btn">
-                                <button class="filter-clear btn" type="button" ng-click="search = ''">
+                                <button class="filter-clear btn" type="button" ng-click="search = ''; updatePath();">
                                     Clear
                                 </button>
                             </span>

util/gh-pages/script.js

@@ -106,7 +106,7 @@
                 }
             };
         })
-        .controller("lintList", function ($scope, $http, $location) {
+        .controller("lintList", function ($scope, $http, $location, $timeout) {
             // Level filter
             var LEVEL_FILTERS_DEFAULT = {allow: true, warn: true, deny: true, none: true};
             $scope.levels = { ...LEVEL_FILTERS_DEFAULT };
@@ -265,12 +265,6 @@
                 }
             }, true);
 
-            $scope.$watch('search', function (newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    $location.path(newVal);
-                }
-            });
-
             // Watch for changes in the URL path and update the search and lint display
             $scope.$watch(function () {
                 return $location.path();
@@ -283,12 +277,33 @@
                 }
             });
 
+            let debounceTimeout;
+            $scope.$watch('search', function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    if (debounceTimeout) {
+                        $timeout.cancel(debounceTimeout);
+                    }
+
+                    debounceTimeout = $timeout(function () {
+                        $location.path(newVal);
+                    }, 1000);
+                }
+            });
+
             $scope.$watch(function () {
                 return $location.search();
             }, function (newParameters) {
                 loadFromURLParameters();
             });
 
+            $scope.updatePath = function () {
+                if (debounceTimeout) {
+                    $timeout.cancel(debounceTimeout);
+                }
+
+                $location.path($scope.search);
+            }
+
             $scope.selectTheme = function (theme) {
                 setTheme(theme, true);
             }