ElasticSearch实现搜索和关键字高亮显示

数据显示

进入门户主站后，点击视频列表,列表为空

视频信息需要从ElasticSearch中获取，打开es

同时打开logstash，用来采集对应的MySQL video_pub中的数据到es的yv_video索引中

打开header插件,可视化es数据

npm run start> elasticsearch-head@0.0.0 start D:\elasticsearch-head
> grunt serverRunning "connect:server" (connect) task
Waiting forever...
Started connect web server on http://localhost:9100

成功写入es！

此时Vue从es拿到数据，这里设置每页两个，

 data(){return {videolist: {},first_category:{},second_category:{},mt:'',st:'',grade:'',keyword:'',imgUrl:config.imgUrl,total:0,//总记录数page:1,//页码page_size:2//每页显示个数}},

模糊搜索

Vue中搜索框对应的代码

 methods:{search() {if (this.keyword === '') {this.$router.push(`/video/search`)} else {let keyword = encodeURIComponent(this.keyword)this.$router.push(`/video/search?keyword=`+keyword)}},

高亮

搜索Python会有红色高亮显示

服务端代码

修改service的搜索方法，添加高亮设置：

 VideoPub videoPub = new VideoPub();//源文档Map<String, Object> sourceAsMap = hit.getSourceAsMap();//取出idString id = (String)sourceAsMap.get("id");videoPub.setId(id);//取出nameString name = (String) sourceAsMap.get("name");//取出高亮字段nameMap<String, HighlightField> highlightFields = hit.getHighlightFields();if(highlightFields!=null){HighlightField highlightFieldName = highlightFields.get("name");if(highlightFieldName!=null){Text[] fragments = highlightFieldName.fragments();StringBuffer stringBuffer = new StringBuffer();for(Text text:fragments){stringBuffer.append(text);}name = stringBuffer.toString();}}

ElasticSearch实现搜索和关键字高亮显示相关推荐

vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
搜索关键字高亮显示，就比微信多个多音字搜索
首先看下demo效果,下载地址一. 需求要求实现的效果汉字支持汉字直接搜索.拼音全拼搜索.拼音简拼搜索搜索匹配到的关键字高亮显示搜索结果优先显示全部匹配.其次是拼音全拼匹配.拼音简拼匹配:关键 ...
html搜索时关键字变数字,JavaScript正则方法replace实现搜索关键字高亮显示
前言正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法,和实现搜索关键字高亮的功能. 先 ...
ElastSearch整合SpringBoot模仿京东商城实现关键字高亮显示
前提:下载Elasticsearch服务并开启,使用SpringBoot集成Elasticsearch客户端用到的技术:Springboot+Vue+Thymeleaf+Elasticsearch ...
基于Elasticsearch实现搜索推荐
在基于Elasticsearch实现搜索建议一文中我们曾经介绍过如何基于Elasticsearch来实现搜索建议,而本文是在此基于上进一步优化搜索体验,在当搜索无结果或结果过少时提供推荐搜索词给用户. ...
ElasticSearch学习29_基于Elasticsearch实现搜索推荐
2019独角兽企业重金招聘Python工程师标准>>> 在基于Elasticsearch实现搜索建议一文中我们曾经介绍过如何基于Elasticsearch来实现搜索建议,而本文是在此 ...
实现查找关键字高亮显示
博主在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,我相信很多小伙伴有同样的经历,因此,整理了一下. 没啥说的,直接上代码,很简单的. <!DOCTYPE html> <htm ...
ElasticSearch(七) 搜索
title: ElasticSearch(七) 搜索 tags: ElasticSearch author: Clown95 搜索在前面,已经介绍了在ElasticSearch索引中处理数据的基础知 ...
ElasticSearch的搜索建议功能suggest search(completion suggest)
出自图灵学院 ElasticSearch课程, 我自己学完了,整理了一下,然后给老师说的话,记录了一下,发了个博客概述 suggest search(completion suggest):就 ...

ElasticSearch实现搜索和关键字高亮显示

数据显示

高亮

服务端代码

ElasticSearch实现搜索和关键字高亮显示相关推荐

最新文章

热门文章