Fix #28

Author: ghiden

angucomplete-alt.js

@@ -78,7 +78,6 @@ angular.module('angucomplete-alt', [] ).directive('angucompleteAlt', ['$q', '$pa
       var inputField = elem.find('input');
       var minlength = MIN_LENGTH;
       var searchTimer = null;
-      var lastSearchTerm = null;
       var hideTimer;
       var requiredClassName = REQUIRED_CLASS;
       var responseFormatter;
@@ -120,12 +119,7 @@ angular.module('angucomplete-alt', [] ).directive('angucompleteAlt', ['$q', '$pa
         if (scope.clearSelected) {
           scope.searchStr = null;
         }
-        scope.showDropdown = false;
-        scope.results = [];
-      }
-
-      function isNewSearchNeeded(newTerm, oldTerm) {
-        return newTerm.length >= minlength && newTerm !== oldTerm;
+        clearResults();
       }
 
       function extractTitle(data) {
@@ -179,12 +173,8 @@ angular.module('angucomplete-alt', [] ).directive('angucompleteAlt', ['$q', '$pa
         else {
           if (!scope.searchStr || scope.searchStr === '') {
             scope.showDropdown = false;
-            lastSearchTerm = null;
-          } else if (isNewSearchNeeded(scope.searchStr, lastSearchTerm)) {
-            lastSearchTerm = scope.searchStr;
-            scope.showDropdown = true;
-            scope.currentIndex = -1;
-            scope.results = [];
+          } else if (scope.searchStr.length >= minlength) {
+            initResults();
 
             if (searchTimer) {
               $timeout.cancel(searchTimer);
@@ -294,6 +284,17 @@ angular.module('angucomplete-alt', [] ).directive('angucompleteAlt', ['$q', '$pa
           .error(httpErrorCallback);
       }
 
+      function clearResults() {
+        scope.showDropdown = false;
+        scope.results = [];
+      }
+
+      function initResults() {
+        scope.showDropdown = true;
+        scope.currentIndex = -1;
+        scope.results = [];
+      }
+
       function getLocalResults(str) {
         var i, match, s,
             searchFields = scope.searchFields.split(','),
@@ -394,13 +395,21 @@ angular.module('angucomplete-alt', [] ).directive('angucompleteAlt', ['$q', '$pa
           scope.searchStr = null;
         }
         else {
-          scope.searchStr = lastSearchTerm = result.title;
+          scope.searchStr = result.title;
         }
         callOrAssign(result);
-        scope.showDropdown = false;
-        scope.results = [];
+        clearResults();
       };
 
+      scope.inputChangeHandler = function(str) {
+        if (str.length < minlength) {
+          clearResults();
+        }
+        if (scope.inputChanged) {
+          str = scope.inputChanged(str);
+        }
+        return str;
+      };
 
       // check required
       if (scope.fieldRequiredClass && scope.fieldRequiredClass !== '') {
@@ -449,9 +458,6 @@ angular.module('angucomplete-alt', [] ).directive('angucompleteAlt', ['$q', '$pa
 
       // set response formatter
       responseFormatter = callFunctionOrIdentity('remoteUrlResponseFormatter');
-
-      // set response formatter
-      scope.inputChangeHandler = callFunctionOrIdentity('inputChanged');
     }
   };
 }]);

test/angucomplete-alt.spec.js

@@ -93,6 +93,40 @@ describe('angucomplete-alt', function() {
       expect(element.find('.angucomplete-row').length).toBeGreaterThan(0);
     });
 
+    it('should show search results after 2 letters are entered and hide results when a letter is deleted', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="2"/>');
+      $scope.selectedCountry = undefined;
+      $scope.countries = [
+        {name: 'Afghanistan', code: 'AF'},
+        {name: 'Aland Islands', code: 'AX'},
+        {name: 'Albania', code: 'AL'}
+      ];
+      $compile(element)($scope);
+      $scope.$digest();
+      var inputField = element.find('#ex1_value');
+      var e = $.Event('keyup');
+
+      e.which = 97; // letter: a
+      inputField.val('a');
+      inputField.trigger('input');
+      inputField.trigger(e);
+      expect(element.find('.angucomplete-row').length).toBe(0);
+
+      e.which = 108; // letter: l
+      inputField.val('al');
+      inputField.trigger('input');
+      inputField.trigger(e);
+      $timeout.flush();
+      expect(element.find('.angucomplete-row').length).toBe(2);
+
+      // delete a char
+      e.which = KEY_DEL;
+      inputField.val('a');
+      inputField.trigger('input');
+      inputField.trigger(e);
+      expect(element.find('.angucomplete-row').length).toBe(0);
+    });
+
     it('should reset selectedObject to undefined when input changes', function() {
       var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1"/>');
       $scope.selectedCountry = undefined;