实现angularJS搜索结果高亮显示功能

1.后端代码：

编写服务层代码ServiceImpl.java

/**

 * 根据关键字搜索列表

 * @param keywords

 * @return

 */

private Map searchList(Map searchMap){

Map map=new HashMap();

HighlightQuery query=new SimpleHighlightQuery();

HighlightOptions highlightOptions=new HighlightOptions().addField("item_title");//设置高亮的域

highlightOptions.setSimplePrefix("<em style='color:red'>");//高亮前缀

highlightOptions.setSimplePostfix("</em>");//高亮后缀

query.setHighlightOptions(highlightOptions);//设置高亮选项

//按照关键字查询

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

query.addCriteria(criteria);

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

for(HighlightEntry<TbItem> h: page.getHighlighted()){//循环高亮入口集合

TbItem item = h.getEntity();//获取原实体类

if(h.getHighlights().size()>0 && h.getHighlights().get(0).getSnipplets().size()>0){

item.setTitle(h.getHighlights().get(0).getSnipplets().get(0));//设置高亮的结果

}

}

map.put("rows",page.getContent());

return map;

}

2.前端代码：

2.1，在base.js增加下面代码：

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

    return function(data){

        return $sce.trustAsHtml(data);

    }

}]);

 2.2，在对应html页面相关位置插入如下代码：

<div class="attr" ng-bind-html="item.title | trustHtml"></div>