Angularjs : Bootstrap Typeahead Customize Highlight

I am using UI bootstrap type-ahead and I am matching based on the leading characters. For example if I type 'A' in the input box I would like to see all the states that start with

Solution 1:

There are two (or three maybe) options, depending on whether or not you're using a custom results template.

decorate the existing filter

If using the built-in results template, you can override or decorate the existing filter used. Like so:

(function () {
    'use strict';

    angular.module('yourModuleName')
        .config(['$provide', '$injector', function($provide, $injector) {

            $provide.decorator('uibTypeaheadHighlightFilter', ['$delegate', function($delegate) {

                var extendsFilter = function() {
                    var isSanitizePresent = $injector.has('$sanitize');

                    functionescapeRegexp(queryToEscape) {
                        // Regex: capture the whole query string and replace it with the string that will be used to match// the results, for example if the capture is "a" the result will be \areturn queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/, '\\$1');
                    }

                    functioncontainsHtml(matchItem) {
                        return/<.*>/g.test(matchItem);
                    }

                    functionmatchFunction (matchItem, query) {
                        if (!isSanitizePresent && containsHtml(matchItem)) {
                            $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger
                        }
                        
/* THIS LINE HERE IS THE ONLY LINE I CHANGED */                        
                        matchItem = query ? ('' + matchItem).replace(newRegExp(escapeRegexp(query), 'i'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tagif (!isSanitizePresent) {
                            matchItem = $sce.trustAsHtml(matchItem); // If $sanitize is not present we pack the string in a $sce object for the ng-bind-html directive
                        }

                        return matchItem;
                    }

                    return matchFunction.apply(null, arguments);
                };

                return extendsFilter;
            }]);
        }]);
})();

Notice that the only change i made to the original filter source code was in the regex replace, right under where i marked /* THIS LINE HERE IS THE ONLY LINE I CHANGED */

original source here, at the very bottom: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js

Old Code:

matchItem = query ? ('' + matchItem).replace(newRegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag

New Code (removed the regex global flag 'g'):

matchItem = query ? ('' + matchItem).replace(newRegExp(escapeRegexp(query), 'i'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag

---

Use your own custom filter

If you are using a custom results template ( see examples' source code http://angular-ui.github.io/bootstrap/versioned-docs/2.4.0/#/typeahead ), you can just specify your own highlight filter in the custom results template, like so:

<scripttype="text/ng-template"id="yourCustomResultsTemplate.html"><a><imgng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}"width="16"><spanng-bind-html="match.label | uibTypeaheadHighlightCustomizedByYou: query"></span></a></script>

Then you would just copy/paste the original filter source code, and modify it in the same way as we did above.