feat(autocomplete): Added maxResultsToShow option

Implemented an option to limit the number of suggestions to be displayed at a time. Closes #23.
mbenford · Dec 1, 2013 · b2ae61b · b2ae61b
1 parent 944f689
commit b2ae61b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 3 deletions.
diff --git a/src/auto-complete.js b/src/auto-complete.js
@@ -16,6 +16,7 @@
  *                                 in the source option.
  * @param {boolean=} [highlightMatchedText=true] Flag indicating that the matched text will be highlighted in the
  *                                               suggestions list.
+ * @param {number=} [maxResultsToShow=10] Maximum number of results to be displayed at a time.
  */
 angular.module('tags-input').directive('autoComplete', function($document, $timeout, $sce, configuration) {
     function SuggestionList(loadFn, options) {
@@ -82,7 +83,7 @@ angular.module('tags-input').directive('autoComplete', function($document, $time
         scope: { source: '&' },
         template: '<div class="autocomplete" ng-show="suggestionList.visible">' +
                   '  <ul class="suggestions">' +
-                  '    <li class="suggestion" ng-repeat="item in suggestionList.items"' +
+                  '    <li class="suggestion" ng-repeat="item in suggestionList.items | limitTo:options.maxResultsToShow"' +
                   '                           ng-class="{selected: item == suggestionList.selected}"' +
                   '                           ng-click="addSuggestion()"' +
                   '                           ng-mouseenter="suggestionList.select($index)"' +
@@ -96,7 +97,8 @@ angular.module('tags-input').directive('autoComplete', function($document, $time
             configuration.load(scope, attrs, {
                 debounceDelay: { type: Number, defaultValue: 100 },
                 minLength: { type: Number, defaultValue: 3 },
-                highlightMatchedText: { type: Boolean, defaultValue: true }
+                highlightMatchedText: { type: Boolean, defaultValue: true },
+                maxResultsToShow: { type: Number, defaultValue: 10 }
             });
 
             suggestionList = new SuggestionList(scope.source, scope.options);

diff --git a/test/auto-complete.spec.js b/test/auto-complete.spec.js
@@ -686,6 +686,47 @@ describe('autocomplete-directive', function() {
             expect(getSuggestionText(4)).toBe('bab');
         });
     });
+
+    describe('max-results-to-show option', function() {
+        it('initializes the option to 10', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.maxResultsToShow).toBe(10);
+        });
+
+        it('sets the option given a static string', function() {
+            // Arrange/Act
+            compile('max-results-to-show="5"');
+
+            // Assert
+            expect(isolateScope.options.maxResultsToShow).toBe(5);
+        });
+
+        it('sets the option given an interpolated string', function() {
+            // Arrange/Act
+            $scope.value = 5;
+            compile('max-results-to-show="{{ value }}"');
+
+            // Assert
+            expect(isolateScope.options.maxResultsToShow).toBe(5);
+        });
+
+        it('limits the number of results to be displayed at a time', function() {
+            // Arrange
+            compile('max-results-to-show="3"');
+
+            // Act
+            loadSuggestions(['Item1', 'Item2', 'Item3', 'Item4', 'Item5']);
+
+            // Assert
+            expect(getSuggestions().length).toBe(3);
+            expect(getSuggestionText(0)).toBe('Item1');
+            expect(getSuggestionText(1)).toBe('Item2');
+            expect(getSuggestionText(2)).toBe('Item3');
+        });
+    });
 });
 
 })();
diff --git a/test/test-page.html b/test/test-page.html
@@ -8,7 +8,11 @@
 </head>
 <body ng-controller="Ctrl">
   <tags-input ng-model="tags" placeholder="{{ placeholder.value }}">
-    <auto-complete source="loadItems($query)" debounce-delay="0" min-length="1" highlight-matched-text="true"></auto-complete>
+    <auto-complete source="loadItems($query)"
+                   debounce-delay="0"
+                   min-length="1"
+                   highlight-matched-text="true"
+                   max-results-to-show="10"></auto-complete>
   </tags-input>
 
   <script type="text/javascript">