elasticsearch实现网页搜索关键字高亮

elasticsearch_2">elasticsearch实现网页搜索关键字高亮

上一篇博客，我们学习了实现在网页中搜索elasticsearch中的数据并显示在网页上

请查看源码：github源码地址

接下来，我们就把关键字设置成高亮吧。只展示关键部分的代码，具体请查看源码。

1.编写Service

java"> //高亮

    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来解析标签。

java"><!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>