Adding debounce to an input text box with an "ng-keyup" in Angular.js

Question

I have this directive for a search box

// Define the search-box
alSH.directive('searchBox',[function(){
      return {
        restrict: 'E',
          template: `
    <input 
      placeholder="Search.." 
      class="search-box"
      ng-keyup=search($evt) 
      ng-model="query"
      ng-model-options="{ debounce: 1000 }"
    />`,
        controller: function SearchBoxController($scope, helper) {
    $scope.query = ''; //ng model
    $scope.search = function() { //this calls in every keyup event
      helper.setQuery($scope.query).search();
    };
    
    helper.setQuery('').search();
  }
    };
}]);

and i tried to use ng-model-options="{ debounce: 1000 }" but still it keeps sending a network request for each key stroke without updating the ng-model probably due to the ng-keyup.
I found this post which asks for something similar but I didn't seem to understand the solution

I have added a codepen demo which has the above code snippet where I'm trying to achieve this behavior

Ideally I would like to limit the number of backend calls sent due to each key stroke. Any idea how to achieve this?

Answer 1

After doing some testing with an answer provided here I managed to add the debouncing.
I removed the ng-keyup=search($evt) but kept the ng-model-options="{ debounce: 1000 }".

    <input 
      placeholder="Search.." 
      class="search-box"
      ng-model="query"
      ng-model-options="{ debounce: 1000 }"
    />

Then in the controller added a watcher which keeps track of the $scope.query variable which triggers the search function. To keep it simple i didn't use the values of newValue and oldValue but extra functionality can be achieved using those as well if needed. solved codepen

          $scope.$watch('query', function (newValue, oldValue) {
            $scope.search();
          });    

Answer 2

You can do it using a simmilar pattern:

var debounceTimer = false;
$scope.search= function() {
    // if there's already a timeout going, cancel the current one
    if (debounceTimer) {
        $timeout.cancel(debounceTimer);
    }
    // create a new timeout, do your thing when it ellapses
    debounceTimer = $timeout(function() { 
        // ... your action goes here, only if calls are made with at least ONE second interval ...  
        helper.setQuery($scope.query).search();        
    },
    // adjust your time interval accordingly 
    1000);
};

Answer 3

Short answer: use ng-change instead of ng-keyup.

Long answer:

Usually using ng-keyup is just wrong as there are lots of ways input value can be modified (e.g. drag-drop), also some keys will not modify input value, e.g. Esc key. Thats why u should be always careful with just using keyup and better use input change events.

If you use ng-model you should require ngModel directive, inject and use ngModelCtrl. That's what ng-change is doing for you: https://github.com/angular/angular.js/blob/9bff2ce8fb170d7a33d3ad551922d7e23e9f82fc/src/ng/directive/ngChange.js

In simple scenarios you dont need to know all that and you can stick to ng-change + ng-model-options, for very specific cases with some weird debounce/throttle/whatever logic when built-in possibilities are not enough, you write custom e.g. my-change directive which works similar way.