Angular Typeahead - footer

Question

I'm using an Angular Typeahead and need to have a footer to the returned results that links to a full advanced search. I know I can do it using jquery, but I'd like to keep this fully Angular.

    <input type="text" ng-model="spotlightModel" autofocus="autofocus" placeholder="Search" typeahead="searchResult.Description as searchResult for searchResult in getResults($viewValue)"
           ypeahead-wait-ms="750" typeahead-template-url="app/views/common/directives/SpotlightSearchResult.html"
           typeahead-on-select="onSelect($item)" class="form-control typeahead-input">

Any suggestions?

Answer 1

I had the same issue. After much googling I found it is possible to overwrite the bootstrap template for typeahead-popup.html.

Here is the original answer. https://stackoverflow.com/a/19720026/4704366

Basically drop this code into a js file to load with your application after ui-bootstrap js. Then replace FOOTER below with your actual footer html.

 angular.module("template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templateCache) {
        $templateCache.put("template/typeahead/typeahead-popup.html",
            "<ul class=\"dropdown-menu\" ng-show=\"isOpen() && !moveInProgress\" ng-style=\"{top: position().top+'px', left: position().left+'px'}\" style=\"display: block;\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">\n" +
            "    <li ng-repeat=\"match in matches track by $index\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index)\" role=\"option\" id=\"{{::match.id}}\">\n" +
            "        <div typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n" +
            "    </li>\n" +
                "FOOTER" +
            "</ul>\n" +
            "");
    }]);

It's a little dirty and seems like a good future feature but it works for now.