Add showOnEmpty option to autoComplete

src/auto-complete.js

@@ -17,6 +17,10 @@
  * @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=} {showOnEmpty=false} Flag indicating whether the dropdown will show on input focus. When using this
+ *                                       option the source expression should handle a null query to account for focus on
+ *                                       an empty input.
  */
 tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInputConfig) {
     function SuggestionList(loadFn, options) {
@@ -49,8 +53,9 @@ 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;
             }
@@ -118,7 +123,8 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 debounceDelay: [Number, 100],
                 minLength: [Number, 3],
                 highlightMatchedText: [Boolean, true],
-                maxResultsToShow: [Number, 10]
+                maxResultsToShow: [Number, 10],
+                showOnEmpty: [Boolean, false]
             });
 
             tagsInput = tagsInputCtrl.registerAutocomplete();
@@ -162,7 +168,10 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 .on('input-change', function(value) {
                     if (value) {
                         suggestionList.load(value, tagsInput.getTags());
-                    } else {
+                    } else if (scope.options.showOnEmpty) {
+                        suggestionList.load(null, tagsInput.getTags(), true);
+                    }
+                    else {
                         suggestionList.reset();
                     }
                 })
@@ -214,6 +223,11 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 })
                 .on('input-blur', function() {
                     suggestionList.reset();
+                })
+                .on('input-focus', function () {
+                    if (scope.options.showOnEmpty) {
+                        suggestionList.load(null, tagsInput.getTags(), true);
+                    }
                 });
 
             $document.on('click', function() {

src/tags-input.js

@@ -216,6 +216,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                     if (scope.hasFocus) {
                         return;
                     }
+                    scope.events.trigger('input-focus');
                     scope.hasFocus = true;
                     scope.$apply();
                 })

test/auto-complete.spec.js

@@ -684,6 +684,40 @@ describe('autocomplete-directive', function() {
         });
     });
 
+    describe('show-on-empty option', function(){
+        it('initialize the option to false', function(){
+            //Arrange
+            compile();
+
+            //Assert
+            expect(isolateScope.options.showOnEmpty).toBe(false);
+        });
+
+        it('shows the suggestion box when the input field becomes empty', function(){
+            //Arrange
+            compile('show-on-empty="true"');
+
+            //Act
+            changeInputValue('');
+            $timeout.flush();
+
+            expect($scope.loadItems).toHaveBeenCalledWith(null);
+        });
+
+        it('shows the suggestion box when input is focused and input is empty', function(){
+            //Arrange
+            compile('show-on-empty="true"');
+
+            //Act
+            eventHandlers['input-focus']();
+            $timeout.flush();
+
+            //Assert
+            expect($scope.loadItems).toHaveBeenCalledWith(null);
+        });
+
+    });
+
     describe('highlight-matched-text option', function() {
         it('initializes the option to true', function() {
             // Arrange/Act