Merge 5fc484f into d70f00a

.gitignore

@@ -5,4 +5,5 @@ node_modules/
 coverage/
 *.log
 build/
-sauce.json
+sauce.json
+*.sw[op]

scss/auto-complete.scss

@@ -11,6 +11,16 @@ tags-input .autocomplete {
   border: $suggestions-border;
   @include box-shadow($suggestions-border-shadow);
 
+  .suggestion-list-header {
+    color: $suggestion-header-color;
+    background-color: $suggestion-header-bgcolor;
+    font: $suggestion-header-font;
+    .suggestion-list-header-inner {
+      margin: 5px;
+      margin-top: 0;
+    }
+  }
+
   .suggestion-list {
     margin: 0;
     padding: 0;
@@ -46,4 +56,4 @@ tags-input .autocomplete {
       background-color: $suggestion-highlight-bgcolor;
     }
   }
-}
+}

scss/variables.scss

@@ -38,8 +38,12 @@ $suggestion-bgcolor:                    #fff;
 $suggestion-color-selected:             #fff;
 $suggestion-bgcolor-selected:           #0097cf;
 
+$suggestion-header-color: #585656;
+$suggestion-header-bgcolor: $suggestion-bgcolor;
+$suggestion-header-font: italic normal 14px monospace;
+
 $suggestion-highlight-font:             normal bold $suggestion-font;
 $suggestion-highlight-color:            $suggestion-color;
 $suggestion-highlight-bgcolor:          $suggestion-bgcolor;
 $suggestion-highlight-color-selected:   $suggestion-color-selected;
-$suggestion-highlight-bgcolor-selected: $suggestion-bgcolor-selected;
+$suggestion-highlight-bgcolor-selected: $suggestion-bgcolor-selected;

src/auto-complete.js

@@ -51,6 +51,7 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
         self.reset = function() {
             lastPromise = null;
 
+            self.totalItemCount = 0;
             self.items = [];
             self.visible = false;
             self.index = -1;
@@ -79,6 +80,7 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
 
                 items = tiUtil.makeObjectArray(items.data || items, getTagId());
                 items = getDifference(items, tags);
+                self.totalItemCount = items.length;
                 self.items = items.slice(0, options.maxResultsToShow);
 
                 if (self.items.length > 0) {
@@ -107,6 +109,10 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
             self.selected = self.items[index];
             events.trigger('suggestion-selected', index);
         };
+        self.headerText = function() {
+            var itemPlural = 'item' + (self.totalItemCount !== 1 ? 's' : '');
+            return 'Showing ' + self.items.length + ' of ' + self.totalItemCount + ' ' + itemPlural;
+        };
 
         self.reset();
 

templates/auto-complete.html

@@ -1,4 +1,9 @@
 <div class="autocomplete" ng-if="suggestionList.visible">
+  <div class="suggestion-list-header">
+    <p
+      class="suggestion-list-header-inner"
+      ng-bind="suggestionList.headerText()"></p>
+  </div>
   <ul class="suggestion-list">
     <li class="suggestion-item"
         ng-repeat="item in suggestionList.items track by track(item)"
@@ -8,4 +13,4 @@
       <ti-autocomplete-match data="::item"></ti-autocomplete-match>
     </li>
   </ul>
-</div>
+</div>

test/auto-complete.spec.js

@@ -89,6 +89,10 @@ describe('autoComplete directive', function() {
         return getSuggestionsBox().find('li');
     }
 
+    function getSuggestionHeaderText() {
+        return getSuggestionsBox().find('.suggestion-list-header-inner').html();
+    }
+
     function getSuggestion(index) {
         return getSuggestions().eq(index);
     }
@@ -130,6 +134,7 @@ describe('autoComplete directive', function() {
             expect(getSuggestions().length).toBe(2);
             expect(getSuggestionText(0)).toBe('Item1');
             expect(getSuggestionText(1)).toBe('Item2');
+            expect(getSuggestionHeaderText()).toBe('Showing 2 of 2 items');
         });
 
         it('renders all elements returned by the load function that aren\'t already added (replaceSpaceWithDashes on)', function() {
@@ -159,6 +164,7 @@ describe('autoComplete directive', function() {
             expect(getSuggestions().length).toBe(2);
             expect(getSuggestionText(0)).toBe('Item1');
             expect(getSuggestionText(1)).toBe('Item2');
+            expect(getSuggestionHeaderText()).toBe('Showing 2 of 2 items');
         });
 
         it('renders all elements returned by the load function that aren\'t already added (non-string items)', function() {
@@ -182,6 +188,7 @@ describe('autoComplete directive', function() {
             expect(getSuggestionText(2)).toBe('[object Object]');
             expect(getSuggestionText(3)).toBe('');
             expect(getSuggestionText(4)).toBe('');
+            expect(getSuggestionHeaderText()).toBe('Showing 5 of 5 items');
         });
 
         it('renders all elements returned by the load function that aren\'t already added (non-promise)', function() {
@@ -224,6 +231,7 @@ describe('autoComplete directive', function() {
 
             // Assert
             expect(isSuggestionsBoxVisible()).toBe(true);
+            expect(getSuggestionHeaderText()).toBe('Showing 1 of 1 item');
         });
 
         it('hides the suggestions list when there is no items to show', function() {
@@ -235,6 +243,7 @@ describe('autoComplete directive', function() {
 
             // Assert
             expect(isSuggestionsBoxVisible()).toBe(false);
+            expect(getSuggestionHeaderText()).toBeUndefined();
         });
 
         it('hides the suggestions list when there is no items left to show', function() {
@@ -984,6 +993,7 @@ describe('autoComplete directive', function() {
 
             // Assert
             expect(isolateScope.options.maxResultsToShow).toBe(10);
+            expect(getSuggestionHeaderText()).toBeUndefined();
         });
 
         it('limits the number of results to be displayed at a time', function() {
@@ -998,6 +1008,7 @@ describe('autoComplete directive', function() {
             expect(getSuggestionText(0)).toBe('Item1');
             expect(getSuggestionText(1)).toBe('Item2');
             expect(getSuggestionText(2)).toBe('Item3');
+            expect(getSuggestionHeaderText()).toBe('Showing 3 of 5 items');
         });
     });