feat(typeahead): support wait-ms option

Author: pkozlowski-opensource

src/typeahead/test/typeahead.spec.js

@@ -326,6 +326,16 @@ describe('typeahead tests', function () {
         $timeout.flush();
         expect($scope.isLoading).toBeFalsy();
       }));
+
+      it('should support timeout before trying to match $viewValue', inject(function ($timeout) {
+
+        var element = prepareInputEl("<div><input ng-model='result' typeahead='item for item in source | filter:$viewValue' typeahead-wait-ms='200'></div>");
+        changeInputValueTo(element, 'foo');
+        expect(element).toBeClosed();
+
+        $timeout.flush();
+        expect(element).toBeOpenWithActive(1, 0);
+      }));
     });
 
     describe('selecting a match', function () {

src/typeahead/typeahead.js

@@ -29,7 +29,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
   };
 }])
 
-  .directive('typeahead', ['$compile', '$parse', '$q', '$document', '$position', 'typeaheadParser', function ($compile, $parse, $q, $document, $position, typeaheadParser) {
+  .directive('typeahead', ['$compile', '$parse', '$q', '$timeout', '$document', '$position', 'typeaheadParser', function ($compile, $parse, $q, $timeout, $document, $position, typeaheadParser) {
 
   var HOT_KEYS = [9, 13, 27, 38, 40];
 
@@ -42,6 +42,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
       //minimal no of characters that needs to be entered before typeahead kicks-in
       var minSearch = originalScope.$eval(attrs.typeaheadMinLength) || 1;
 
+      //minimal wait time after last character typed before typehead kicks-in
+      var waitTime = originalScope.$eval(attrs.typeaheadWaitMs) || 0;
+
       //expressions used by typeahead
       var parserResult = typeaheadParser.parse(attrs.typeahead);
 
@@ -124,12 +127,23 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
       //$parsers kick-in on all the changes coming from the view as well as manually triggered by $setViewValue
       modelCtrl.$parsers.push(function (inputValue) {
 
+        var timeoutId;
+
         resetMatches();
         if (selected) {
           return inputValue;
         } else {
           if (inputValue && inputValue.length >= minSearch) {
-            getMatchesAsync(inputValue);
+            if (waitTime > 0) {
+              if (timeoutId) {
+                $timeout.cancel(timeoutId);//cancel previous timeout
+              }
+              timeoutId = $timeout(function () {
+                getMatchesAsync(inputValue);
+              }, waitTime);
+            } else {
+              getMatchesAsync(inputValue);
+            }
           }
         }