feat(autocomplete): Down arrow hotkey option to open suggestion box i…

…f not shown

Add the down arrow event as a hotkey that opens the suggestion box if the
suggestion box is not visible. This feature is important because it gives
the user a method for browsing the list of tags without needing to filter.

Closes #54

src/auto-complete.js

@@ -18,6 +18,9 @@
  * @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.
+ *
+ * @param {boolean=} [showSuggestionOnDownkey=false] When true the suggestion box will load and become visible on down
+ *                                                   down key trigger.
  */
 tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInputConfig) {
     function SuggestionList(loadFn, options) {
@@ -44,8 +47,8 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
             self.selected = null;
             self.visible = true;
         };
-        self.load = function(query, tags) {
-            if (query.length < options.minLength) {
+        self.load = function(query, tags, override) {
+            if (!override && query.length < options.minLength) {
                 self.reset();
                 return;
             }
@@ -116,7 +119,8 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 debounceDelay: [Number, 100],
                 minLength: [Number, 3],
                 highlightMatchedText: [Boolean, true],
-                maxResultsToShow: [Number, 10]
+                maxResultsToShow: [Number, 10],
+                showSuggestionsOnDownkey: [Boolean, false]
             });
 
             options = scope.options;
@@ -179,7 +183,8 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                     }
                 })
                 .on('input-keydown', function(e) {
-                    var key, handled;
+                    var key = e.keyCode,
+                        handled = false;
 
                     if (hotkeys.indexOf(e.keyCode) === -1) {
                         return;
@@ -198,8 +203,6 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                     };
 
                     if (suggestionList.visible) {
-                        key = e.keyCode;
-                        handled = false;
 
                         if (key === KEYS.down) {
                             suggestionList.selectNext();
@@ -216,13 +219,19 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                         else if (key === KEYS.enter || key === KEYS.tab) {
                             handled = scope.addSuggestion();
                         }
-
-                        if (handled) {
-                            e.preventDefault();
-                            e.stopImmediatePropagation();
-                            scope.$apply();
+                    }
+                    else if(!suggestionList.visible){
+                        if(key === KEYS.down && scope.options.showSuggestionsOnDownkey){
+                            var val = e.currentTarget ? e.currentTarget.value : null;
+                            suggestionList.load(val && val.length > 0 ? val : null, tagsInput.getTags(), true);
+                            handled = true;
                         }
                     }
+                    if (handled) {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                        scope.$apply();
+                    }
                 })
                 .on('input-blur', function() {
                     suggestionList.reset();

test/auto-complete.spec.js

@@ -657,6 +657,40 @@ describe('autoComplete directive', function() {
         });
     });
 
+    describe('show-suggestions-on-downkey option', function(){
+        it('initializes the option to false', function(){
+           //Arrange
+            compile();
+
+            //Assert
+            expect(isolateScope.options.showSuggestionsOnDownkey).toBe(false);
+
+        });
+        it('shows the suggestion box when down arrow keydown is triggered', function() {
+            //Arrange
+            compile('show-suggestions-on-downkey="true"');
+
+            // Act
+            sendKeyDown(KEYS.down);
+            $timeout.flush();
+
+            // Assert
+            expect($scope.loadItems).toHaveBeenCalledWith(null);
+
+        });
+        it('does prevent the down arrow keydown event from being propagated', function() {
+            //Arrange
+            compile('show-suggestions-on-downkey="true"');
+
+            // Act
+            var event = sendKeyDown(KEYS.down);
+
+            // Assert
+            expect(event.isDefaultPrevented()).toBe(true);
+            expect(event.isPropagationStopped()).toBe(true);
+        });
+    });
+
     describe('debounce-delay option', function() {
         it('initializes the option to 100 milliseconds', function() {
             // Arrange/Act
@@ -854,6 +888,24 @@ describe('autoComplete directive', function() {
             expect(getSuggestionText(1)).toBe('Item &lt;2<em>&gt;</em>');
             expect(getSuggestionText(2)).toBe('Item &amp;3');
         });
+
+        it('doesn\'t highlight text if input is not null but min-length is 0', function() {
+
+            //Arrange
+            compile('highlight-matched-text="true"', 'min-length="0"');
+
+            //Act
+            loadSuggestions(['a', 'ab', 'ba', 'aba', 'bab'], '');
+
+            //Assert
+            // Assert
+            expect(getSuggestionText(0)).toBe('a');
+            expect(getSuggestionText(1)).toBe('ab');
+            expect(getSuggestionText(2)).toBe('ba');
+            expect(getSuggestionText(3)).toBe('aba');
+            expect(getSuggestionText(4)).toBe('bab');
+
+        });
     });
 
     describe('max-results-to-show option', function() {