使用spring data solr 實現搜索關鍵字高亮顯示

后端實現：

@Service
public class ItemSearchServiceImpl implements ItemSearchService {
    @Autowired
    private SolrTemplate solrTemplate;

    @Override
    public Map<String, Object> search(Map searchMap) {
        Map<String,Object> map=new HashMap<>();

        //1.查詢列表
        Map searchListMap = searchList(searchMap);

        map.putAll(searchListMap);
        return map;
    }


    /**
     * 根據關鍵字搜索列表
     * @param searchMap
     * @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<Item> page = solrTemplate.queryForHighlightPage(query, Item.class);

        for ( HighlightEntry<Item> h : page.getHighlighted()) {//循環高亮入口集合
            Item item = h.getEntity();//獲得原實體類
            //獲取高亮列表(高亮域的個數) h.getHighlights();
            //獲取每個域有可能存儲多值  h.getSnipplets()
            //獲取要高亮的內容 h.getSnipplets.get(0);
            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;
    }
}

 

前端顯示:

angularJS為了防止html攻擊采取的安全機制，所以不能直接顯示html的結果。

我們就要用到$sce服務的trustAsHtml方法來實現轉換。

/*$sce服務寫成過濾器*/

app.filter('trustHtml',['$sce',function ($sce) {
    return function (data) {//傳入參數是被過濾的內容
        return $sce.trustAsHtml(data);//返回的是過濾后的內容(信任html的轉換)
    }
}]);

 

使用過濾器

ng-bind-html指令用於顯示html內容

豎線 | 用於調用過濾器

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