Angularjs：Bootstrap typeahead 自定义突出显示

Question

我正在使用 UI 引导程序预先输入，并且我正在根据前导字符进行匹配。例如，如果我在输入框中键入“A”，我想查看所有以“A”开头的州，如“Alabama”，而不是所有名称中包含“A”的州。

现在我想要实现的是，如果我在输入框中键入“A”，除了过滤掉所有以“A”开头的状态之外，我只想突出显示第一个 A。如果这个词是“Alabama”，它应该只突出“Alabama”的第一个“A”，而不是“A”的其他出现。如果我的列表中有“Papa”这个词，并且我在输入框中输入“Pa”，它应该会突出显示“Papa”中第一次出现的“Pa”。

这是我的示例代码

myHtml.html

<div class='container-fluid' ng-controller="TypeaheadCtrl">
   <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue:startsWith">
</div>

myJs.js

angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl',   function($scope) {

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'];

 $scope.startsWith = function(state, viewValue) {
        return state.substr(0, viewValue.length).toLowerCase() ==  viewValue.toLowerCase();
      } 
 });

Answer 1

有两个（或三个可能）选项，具体取决于您是否使用自定义结果模板。

装饰现有的过滤器

如果使用内置结果模板，您可以覆盖或装饰使用的现有过滤器。像这样：

(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');

                    function escapeRegexp(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 \a
                        return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/, '\\$1');
                    }

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

                    function matchFunction (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(new RegExp(escapeRegexp(query), 'i'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag
                        if (!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;
            }]);
        }]);
})();

请注意，我对原始过滤器源代码所做的唯一更改是在正则表达式替换中，就在我标记的地方 /* 此处的这一行是我唯一更改的行 */

原始来源在这里，在最底部： https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js

旧代码：

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

新代码（删除了正则表达式全局标志 'g'）：

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

---

使用您自己的自定义过滤器

如果您使用的是自定义结果模板（参见示例源代码http://angular-ui.github.io/bootstrap/versioned-docs/2.4.0/#/typeahead），您可以在自定义结果模板中指定自己的高亮过滤器，如下所示：

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

然后您只需复制/粘贴原始过滤器源代码，并按照我们上面所做的相同方式对其进行修改。