如何设置solr搜索的关键字在回显页面高亮

个人学习以做笔记记录，在搜索solr时对关键字进行高亮显示

/**

* 根据关键字搜索列表

* @param keywords

* @return Map 

*/

private Map searchHighLightMap(String keywords) {

Map map = new HashMap<>();

HighlightQuery query = new SimpleHighlightQuery();

Criteria criteria = new Criteria("item_keywords").is(keywords);

query.addCriteria(criteria);

HighlightOptions options = new HighlightOptions();

options.addField("item_title");

options.setSimplePrefix("<font color='red'>");

options.setSimplePostfix("</font>");

query.setHighlightOptions(options);

HighlightPage<TbItem> page = solrTemplate.queryForHighlightPage(query, TbItem.class);

// 获取高亮显示内容

List<HighlightEntry<TbItem>> highlighted = page.getHighlighted();

for (HighlightEntry<TbItem> entry : highlighted) {

// 数据

TbItem entity = entry.getEntity();

// 所有高亮显示的域

List<Highlight> highlights = entry.getHighlights();

if (highlights.size() > 0 && highlights.get(0).getSnipplets().size() > 0) {

String text = highlights.get(0).getSnipplets().get(0);

entity.setTitle(text);

}

}

List<TbItem> list = page.getContent();

map.put("rows", list);

return map;

}

在服务层创建此私有方法，用于返回关键字匹配的列表结果    

我们测试后发现高亮显示的html代码原样输出，这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢？我们会用到$sce服务的trustAsHtml方法来实现转换。

因为这个功能具有一定通用性，我们可以通过angularJS的过滤器来简化开发，这样只写一次，调用的时候就非常方便了

// 定义模块:

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

/*$sce服务写成过滤器*/

app.filter('trustHtml',['$sce',function($sce){

    return function(data){

        return $sce.trustAsHtml(data);

    }

}]);

ng-bind-html指令用于显示html内容

竖线|用于调用过滤器

OK完成