Merge pull request ghiden#142 from ghiden/107-show-all

ghiden#107 show all
Roh-codeur · Mar 30, 2015 · b8ad0af · b8ad0af
2 parents f15c211 + ec92abd
commit b8ad0af
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ To see a demo go here: http://ghiden.github.io/angucomplete-alt
 * Show scrollbar. See [example #1](http://ghiden.github.io/angucomplete-alt/#example1)
 * Clear input by sending $broadcast from parent scope. Thanks to @Leocrest for #61.
 * Override template with your own. When you use this feature, test throughly as it might break other features. Thanks to @sdbondi for #74.
+* Show all items.
 
 ### Getting Started
 Download the package, and include the dist/angucomplete-alt.min.js file in your page.
@@ -99,7 +100,7 @@ var app = angular.module('app', ["angucomplete-alt"]);
 | title-field | The name of the field in the JSON objects returned back that should be used for displaying the title in the autocomplete list. Note, if you want to combine fields together, you can comma separate them here (e.g. for a first and last name combined). If you want to access nested field, use dot to connect attributes (e.g. name.first). [example](http://ghiden.github.io/angucomplete-alt/#example1) | Yes | firstName,lastName |
 | description-field | The name of the field in the JSON objects returned back that should be used for displaying the description in the autocomplete list. [example](http://ghiden.github.io/angucomplete-alt/#example6) | No | twitterUsername |
 | image-field | The name of the field in the JSON objects returned back that should be used for displaying an image in the autocomplete list. [example](http://ghiden.github.io/angucomplete-alt/#example2) | No | pic |
-| minlength | The minimum length of string required before searching. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | 3 |
+| minlength | The minimum length of string required before searching. [example](http://ghiden.github.io/angucomplete-alt/#example1). If set to 0, it shows all items. It works both local and remote but is intended to use with local data. If used with remote API, it needs to return all items when query parameter is empty string. | No | 3 |
 | input-class | The classes to use for styling the input box. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | form-control |
 | match-class | If it is assigned, matching part of title is highlighted with given class style. [example](http://ghiden.github.io/angucomplete-alt/#example6) | No | highlight |
 | local-data | The local data variable to use from your controller. Should be an array of objects. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | countriesList |

diff --git a/angucomplete-alt.js b/angucomplete-alt.js
@@ -546,10 +546,23 @@
           }
         }
 
+        function showAll() {
+          if (scope.localData) {
+            processResults(scope.localData, '');
+          }
+          else {
+            getRemoteResults('');
+          }
+        }
+
         scope.onFocusHandler = function() {
           if (scope.focusIn) {
             scope.focusIn();
           }
+          if (minlength === 0 && (!scope.searchStr || scope.searchStr.length === 0)) {
+            scope.showDropdown = true;
+            showAll();
+          }
         };
 
         scope.hideResults = function(event) {
@@ -610,6 +623,10 @@
           if (str.length < minlength) {
             clearResults();
           }
+          else if (str.length === 0 && minlength === 0) {
+            showAll();
+          }
+
           if (scope.inputChanged) {
             str = scope.inputChanged(str);
           }
@@ -623,7 +640,7 @@
 
         // check min length
         if (scope.minlength && scope.minlength !== '') {
-          minlength = scope.minlength;
+          minlength = parseInt(scope.minlength, 10);
         }
 
         // check pause time

diff --git a/test/angucomplete-alt.spec.js b/test/angucomplete-alt.spec.js
@@ -1369,4 +1369,67 @@ describe('angucomplete-alt', function() {
       expect(inputField.val()).toEqual('e');
     });
   });
+
+  describe('set minlenght to 0', function() {
+    it('should show all items when focused', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="countrySelected" local-data="countries" search-fields="name" title-field="name" minlength="0"/>');
+      $scope.countrySelected = null;
+      $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');
+      expect(element.find('.angucomplete-row').length).toBe(0);
+      // TODO: should replace all triggers with this triggerHandler
+      // http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html
+      inputField.triggerHandler('focus');
+      $scope.$digest();
+      expect(element.find('.angucomplete-row').length).toBe(3);
+    });
+
+    it('should remove highlight when input becomes empty', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="countrySelected" local-data="countries" search-fields="name" title-field="name" minlength="0" match-class="highlight"/>');
+      $scope.countrySelected = null;
+      $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');
+      inputField.triggerHandler('focus');
+      $scope.$digest();
+      expect(element.find('.angucomplete-row').length).toBe(3);
+      element.find('.angucomplete-row .highlight').each(function() {
+        expect($(this).text().length).toBe(0);
+      });
+
+      var eKeyup = $.Event('keyup');
+      eKeyup.which = 97; // letter: a
+
+      inputField.val('a');
+      inputField.triggerHandler('input');
+      inputField.trigger(eKeyup);
+      $timeout.flush();
+      element.find('.angucomplete-row .highlight').each(function() {
+        expect($(this).text().length).toBeGreaterThan(0);
+      });
+
+      eKeyup.which = KEY_DEL;
+      inputField.val('');
+      inputField.triggerHandler('input');
+      inputField.trigger(eKeyup);
+      $scope.$digest();
+      element.find('.angucomplete-row .highlight').each(function() {
+        expect($(this).text().length).toBe(0);
+      });
+      expect(element.find('.angucomplete-row').length).toBe(3);
+    });
+  });
 });