Question

我正在使用AngularJS获取搜索功能，并创建了一个自定义过滤器以突出显示搜索结果中的文本。

下面是我的过滤器（JS）：

var myApp = angular.module('myApp', []).filter('highlight', function($sce) {
    return function(query, phrase) {
      if (phrase) query = query.replace(new RegExp('('+phrase+')', 'gi'),
        '<span class="highlighted">$1</span>')

      return $sce.trustAsHtml(query)
    }
});

相关的HTML：

<input ng-model="query" ng-keyup="search()" type="text" data-ele="home_search" class="form-control" id="exampleInputAmount" placeholder="">
<div ng-if="item.search_type == 'playset'" ng-animate="'animate'" ng-repeat="item in artists | filter: query | highlight:query" class="block gry-block">

添加过滤器后，会出现错误，我不知道原因。

任何帮助都是适当的。

您还可以在this URL检查此行为。

Answer 1

 <input id="searchText" type="search" placeholder="Search Asset..." ng-model="searchText" />
 <div ng-repeat="singleItem in yourArray| filter : searchText">

Answer 2

您提供的代码不足以让我为您提供代码的工作示例。但是，我假设您要在DOM元素中突出显示关键字。然后查看mark.js，关键字/搜索字词或自定义正则表达式荧光笔。

示例：

var markInstance = new Mark(document.querySelector(".context"));
function highlight(){
    var searchTerm = document.querySelector("input").value;
    markInstance.unmark().mark(searchTerm);
}

mark{
    background: yellow;
}

<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script>
<input type="text" placeholder="Lorem ipsum..." oninput="highlight()">
<p class="context">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Answer 3

您是否使用angular-sanatize.js文件从控制器返回内联样式？

我为你的问题编写了一个非正则表达式解决方案。不完全是您的问题的答案，但可以随意使用此Codepen Example。

希望这会有所帮助：）

角度突出搜索文本

3 个答案: