elasticsearch实现网页搜索关键字高亮
上一篇博客,我们学习了 实现在网页中搜索elasticsearch中的数据并显示在网页上
请查看源码:github源码地址
接下来,我们就把关键字设置成高亮吧。只展示关键部分的代码,具体请查看源码。
1.编写Service
//高亮
public List<Map<String, Object>> searchPageHighlightBuilder(String keyword, int pageNo, int pageSize) throws IOException {
if (pageNo <= 1) {
pageNo = 1;
}
//条件搜索。
SearchRequest searchRequest = new SearchRequest(INDEX_NAME);
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
//分页
sourceBuilder.from(pageNo);
sourceBuilder.size(pageSize);
//精准匹配
TermQueryBuilder termQueryBuilder = QueryBuilders.termQuery("name", keyword);
sourceBuilder.query(termQueryBuilder);
sourceBuilder.timeout(new TimeValue(60, TimeUnit.SECONDS));
//高亮
HighlightBuilder highlightBuilder = new HighlightBuilder();
highlightBuilder.field("name");
highlightBuilder.requireFieldMatch(false);//关闭多个高亮,显示一个即可。
highlightBuilder.preTags("<span style='color:red'>");
highlightBuilder.postTags("</span>");
sourceBuilder.highlighter(highlightBuilder);
//执行搜索
searchRequest.source(sourceBuilder);
SearchResponse searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);
//结果解析
ArrayList<Map<String, Object>> list = new ArrayList<>();
for (SearchHit hit : searchResponse.getHits().getHits()) {
Map<String, HighlightField> highlightFields = hit.getHighlightFields();
HighlightField name = highlightFields.get("name");
Map<String, Object> sourceAsMap = hit.getSourceAsMap();//原来的结果
//解析高亮字段
if(name != null){
Text[] fragments = name.fragments();
String n_name = "";
for(Text text : fragments){
n_name += text;
}
sourceAsMap.put("name",n_name);
}
list.add(sourceAsMap);
}
return list;
}
1.在网页中使用Vue的 v-html来解析标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<div id="app">
<input type="text" v-model="keyword">
<input type="button" @click="searchKey" value="搜索">
<hr/>
<p>{{keyword}}</p>
<hr/>
<p v-for="item in arr">
图片 :{{"http://pic.netbian.com"+item.img}}
<a v-html="item.name"></a>
<img :src="'http://pic.netbian.com'+item.img">
</p>
<hr/>
</div>
<script>
new Vue({
el: '#app',
data: {
keyword: '搜索的内容', //搜索的关键字
arr: ["初始数据1","初始数据2","初始数据3"] //搜索的结果
},
methods: {
searchKey(){
var keyword = this.keyword;
console.log(keyword);
//对接后端的接口
axios.get("search/"+keyword+"/1/20").then
(response=>{
console.log(response);
//赋值给result
this.arr = response.data;
//console.log(this.arr);
},function (err){
console.log(err);
})
}
}
})
</script>
</body>
</html>