使用 angularjs 过滤器突出显示搜索结果答案

【问题标题】：Highlight search results using angularjs filter使用 angularjs 过滤器突出显示搜索结果
【发布时间】：2017-12-22 00:41:57
【问题描述】：

我有一个简单的表格，每下一行都是通过单击“追加”按钮添加的。

我需要突出显示搜索输入字段与表格输入字段之间的匹配项。

尝试使用highlight 过滤器来实现这一点，但它运行时出现错误：

"TypeError: Cannot read property 'replace' of undefined"

我该如何解决？示例代码如下：

var app = angular.module("myApp",[]);

            app.filter('highlight', function($sce) {
                return function(text, phrase) {
                if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
                '<span class="highlighted">$1</span>')
                return $sce.trustAsHtml(text)
                }
            });

            app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
                $scope.arr = [];
                $scope.append = function(){
                    var x = {};
                    x.data1 = "";
                    x.data2 = "";
                    $scope.arr.push(x); 
                };
            }]);

<!DOCTYPE html>
<html>
    <head>
        <title>Author's List</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .highlighted { background: yellow }
        </style>
    </head>
    <body ng-controller="myCtrl" ng-app="myApp">
        <div class="container">
            <div class="btn-group">
                <button ng-click ="append()" type="button" class="btn btn-default">Append</button>
                <input type="text" placeholder="Search" ng-model="search.text">
                <ul>
                    <div ng-repeat="x in arr | filter:search.text" ng-bind-html="x.text | highlight:search.text"></div>
                </ul>
            </div>
            <form name ="myForm" novalidate> 
                <table class="table table-bordered">
                    <tr>
                        <th>data1</th>
                        <th>data2</th>
                    </tr>
                    <tr ng-repeat="x in arr">
                        <td><input ng-model="x.data1" required type="text" class="form-control"></td>
                        <td><input ng-model="x.data2" required type="text" class="form-control"></td>
                    </tr>
                </table>
            </form>
        </div>
           </body>
</html>

【问题讨论】：

标签： angularjs search highlight angularjs-filter

【解决方案1】：

这里的问题是您的过滤器将输入文本作为第一个参数，但您传递的字段未在您的模型上定义：ng-bind-html="x.text | highlight:search.text"。您有字段 data1 和 data2 但没有 text，这就是您收到上述错误的原因。

您的过滤器实际上正在工作，但您必须将正确的输入参数传递给它：

var app = angular.module("myApp",[]);

            app.filter('highlight', function($sce) {
                return function(text, phrase) {
                if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
                '<span class="highlighted">$1</span>')
                return $sce.trustAsHtml(text)
                }
            });

            app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
                $scope.arr = [];
                $scope.append = function(){
                    var x = {};
                    x.data1 = "";
                    x.data2 = "";
                    $scope.arr.push(x); 
                };
            }]);

<!DOCTYPE html>
<html>
    <head>
        <title>Author's List</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .highlighted { background: yellow }
        </style>
    </head>
    <body ng-controller="myCtrl" ng-app="myApp">
        <div class="container">
            <div class="btn-group">
                <button ng-click ="append()" type="button" class="btn btn-default">Append</button>
                <input type="text" placeholder="Search" ng-model="search.text">
                <br style="clear: both;"/>
                <ul>
                    <li ng-repeat="x in arr | filter:search.text">
                      <span ng-bind-html="x.data1 | highlight:search.text"></span>
                      <span ng-bind-html="x.data2 | highlight:search.text"></span>
                    </li>
                </ul>
            </div>
            <form name ="myForm" novalidate> 
                <table class="table table-bordered">
                    <tr>
                        <th>data1</th>
                        <th>data2</th>
                    </tr>
                    <tr ng-repeat="x in arr">
                        <td><input ng-model="x.data1" required type="text" class="form-control"></td>
                        <td><input ng-model="x.data2" required type="text" class="form-control"></td>
                    </tr>
                </table>
            </form>
        </div>
           </body>

【讨论】：

谢谢！有没有可能直接在输入中突出显示？
@VladyslavPlakhuta 不，因为input 仅支持纯文本。唯一的方法是用div 和contenteditable="true" 模拟inputs。你可以在这里看到一个例子stackoverflow.com/a/44675864/4222181