2021-01-02

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("");
        highlightBuilder.postTags("");
        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>

在这里插入图片描述

2021-01-02_第1张图片

你可能感兴趣的:(vue,java,elasticsearch,搜索引擎)