feat(autocomplete): Custom template support for autocomplete

src/auto-complete.js

@@ -27,8 +27,9 @@
  *                                       gains focus. The current input value is available as $query.
  * @param {boolean=} [selectFirstMatch=true] Flag indicating that the first match will be automatically selected once
  *                                           the suggestion list is shown.
+ * @param {string=} [templateHtmlUrl=undefined] Url to load custom template html.
  */
-tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tagsInputConfig, tiUtil) {
+tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, $interpolate, $http, $templateCache, tagsInputConfig, tiUtil) {
     function SuggestionList(loadFn, options) {
         var self = {}, getDifference, lastPromise;
 
@@ -119,10 +120,16 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
                 loadOnDownArrow: [Boolean, false],
                 loadOnEmpty: [Boolean, false],
                 loadOnFocus: [Boolean, false],
-                selectFirstMatch: [Boolean, true]
+                selectFirstMatch: [Boolean, true],
+                templateHtmlUrl:[String, undefined]
             });
 
             options = scope.options;
+            if (angular.isDefined(options.templateHtmlUrl)){
+                $http.get(options.templateHtmlUrl, {cache: $templateCache}).then(function(result){
+                    options.templateHtml = result.data;
+                });
+            }
 
             tagsInput = tagsInputCtrl.registerAutocomplete();
             options.tagsInput = tagsInput.getOptions();
@@ -162,12 +169,21 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
             };
 
             scope.highlight = function(item) {
-                var text = getDisplayText(item);
-                text = tiUtil.encodeHTML(text);
-                if (options.highlightMatchedText) {
-                    text = tiUtil.safeHighlight(text, tiUtil.encodeHTML(suggestionList.query));
+                if (angular.isDefined(options.templateHtml)){
+                    var custome_text = $interpolate(options.templateHtml)(item);
+                    if (options.highlightMatchedText) {
+                        custome_text = tiUtil.safeHighlight(custome_text, tiUtil.encodeHTML(suggestionList.query));
+                    }
+                    return $sce.trustAsHtml(custome_text);
+                }
+                else{
+                    var text = getDisplayText(item);
+                    text = tiUtil.encodeHTML(text);
+                    if (options.highlightMatchedText) {
+                        text = tiUtil.safeHighlight(text, tiUtil.encodeHTML(suggestionList.query));
+                    }
+                    return $sce.trustAsHtml(text);
                 }
-                return $sce.trustAsHtml(text);
             };
 
             scope.track = function(item) {

test/auto-complete.spec.js

@@ -1,21 +1,21 @@
 'use strict';
 
 describe('autoComplete directive', function() {
-    var $compile, $scope, $q, $timeout,
+    var $compile, $scope, $q, $timeout,$templateCache,
         parentCtrl, element, isolateScope, suggestionList, deferred, tagsInput, eventHandlers;
 
     beforeEach(function() {
+
         jasmine.addMatchers(customMatchers);
 
         module('ngTagsInput');
-
-        inject(function($rootScope, _$compile_, _$q_, _$timeout_) {
+        inject(function($rootScope, _$compile_, _$q_, _$timeout_,_$templateCache_){
+            $templateCache = _$templateCache_;
             $scope = $rootScope;
             $compile = _$compile_;
             $q = _$q_;
             $timeout = _$timeout_;
         });
-
         deferred = $q.defer();
         eventHandlers = {
             call: function(name, args) {
@@ -26,6 +26,9 @@ describe('autoComplete directive', function() {
         };
         $scope.loadItems = jasmine.createSpy().and.returnValue(deferred.promise);
 
+        $templateCache.put('custom_template.html',
+            '{{text}} - {{author}}'
+        );
         compile();
     });
 
@@ -1087,5 +1090,43 @@ describe('autoComplete directive', function() {
             expect(getSuggestion(2)).not.toHaveClass('selected');
 
         });
+    });
+    describe('custom template feature', function() {
+        it('initializes templateHtml to undefined', function() {
+            compile();
+            expect(isolateScope.options.templateHtml).toBe(undefined);
+        });
+        it('initializes templateHtmlUrl to undefined', function() {
+            compile();
+            expect(isolateScope.options.templateHtmlUrl).toBe(undefined);
+        });
+        it('uses default template for suggestion if option templateHtmlUrl is not specified', function() {
+            compile();
+            loadSuggestions({
+                data: [
+                    { text: 'Superman', author:'Jerry Siegel' },
+                    { text: 'Spiderman', author:'Stan Lee' }
+                ]
+            });
+            expect(getSuggestionText(0)).toBe('Superman');
+            expect(getSuggestionText(1)).toBe('Spiderman');
+        });
+        it('uses custom template for suggestion if option templateHtmlUrl is specified', function() {
+            compile('template-html-url="custom_template.html"');
+            expect(isolateScope.options.templateHtmlUrl).toBe('custom_template.html');
+            expect(isolateScope.options.templateHtml).toBe('{{text}} - {{author}}');
+            loadSuggestions({
+                data: [
+                    { text: 'Superman', author:'Jerry Siegel' },
+                    { text: 'Spiderman', author:'Stan Lee' }
+                ]
+            });
+            expect(getSuggestionText(0)).toBe('Superman - Jerry Siegel');
+            expect(getSuggestionText(1)).toBe('Spiderman - Stan Lee');
+        });
+
+
+
+
     });
 });

test/test-page.html

@@ -43,12 +43,22 @@
     }
   </style>
 </head>
+<script type="text/ng-template" id="custome_template.html">
+ {{text}} - {{author}}
+</script>
 <body ng-controller="Ctrl">
+
     <p></p>
     <tags-input ng-model="tags" add-on-blur="false" ng-focus="focus()" ng-blur="blur()" add-on-paste="true" paste-split-pattern="[,;|]" spellcheck="false">
         <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
     </tags-input>
     <p></p>
+      <span class="input-group-addon">Custome Autocomplete</span>
+      <p></p>
+     <tags-input ng-model="tags" add-on-blur="false" ng-focus="focus()" ng-blur="blur()" add-on-paste="true" paste-split-pattern="[,;|]" spellcheck="false">
+        <auto-complete template-html-url="custome_template.html" source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
+    </tags-input>
+     <p></p>
     <div class="input-group" style="width: 600px">
         <span class="input-group-addon">@</span>
         <tags-input ng-model="tags">
@@ -96,15 +106,15 @@
     angular.module('app', ['ngTagsInput'])
         .controller('Ctrl', function($scope, $q) {
             var superheroes = [
-              { text: 'Batman <[email protected]>' },
-              { text: 'Superman' },
-              { text: 'Flash' },
-              { text: 'Iron Man' },
-              { text: 'Hulk' },
-              { text: 'Wolverine' },
-              { text: 'Green Lantern' },
-              { text: 'Green Arrow' },
-              { text: 'Spiderman'}
+              { text: 'Batman <[email protected]>', author:'Bob Kane' },
+              { text: 'Superman', author:'Jerry Siegel' },
+              { text: 'Flash', author:'Gardner Fox' },
+              { text: 'Iron Man', author:'Stan Lee' },
+              { text: 'Hulk', author:'Stan Lee' },
+              { text: 'Wolverine', author:'Len Wein' },
+              { text: 'Green Lantern', author:'Bill Finger' },
+              { text: 'Green Arrow', author:'George Papp' },
+              { text: 'Spiderman', author:'Stan Lee'}
             ];
 
             $scope.tags = [{ text: 'Batman' }, { text: 'Superman' }, { text:'Flash' }];