ElasticSearch Suggest Completion 智能补全技术整合SpringBoot+Vue实现

效果演示视频和教学讲解视频地址：演示地址

1.首先在Kibana中创建索引和类型。

PUT /campus_market
{"mappings": {"product" : {"properties" : {"name" : {"type": "text","analyzer": "ik_max_word","fields": {"suggest" : {"type" : "completion","analyzer": "ik_max_word"}}},"info": {"type": "text","analyzer": "ik_max_word"}}}}
}

2.然后在Kibana中导入文档数据，或者在SpringBoot中项目导出也是可以。本人是采取后者的做法，创建一个定时任务，定时从MySQL中取出数据然后更新ES中的数据。

 @Scheduled(cron = "*/20 * * * * ?") //20s执行一次
//    @Scheduled(cron = "0 */10 * * * ?") //10分钟执行一次private void configureESTasks() {logger.info("开始更新ES中数据....");ResponseDTO<List<ProductDTO>> productDTOList = productService.getProductList(new ProductDTO());List<Product> productList = CopyUtil.copyList(productDTOList.getData(), Product.class);List<Product> allProductList = productMapper.selectByExample(new ProductExample());//先清空ElasticSearch中的数据for(Product product : allProductList) {productRepository.delete(product);}//从数据库中查询出数据添加到ES中for(Product product : productList){productRepository.save(product);}logger.info("更新ES中数据完成....");}

写定时任务之前，别忘了先给对应实体类创建Repository接口并且要在配置文件中进行相应配置。
Repository接口

public interface ProductRepository extends ElasticsearchRepository<Product,String> {}

config配置文件配置

@Configuration
public class ESRestClientConfig extends AbstractElasticsearchConfiguration {@Override@Beanpublic RestHighLevelClient elasticsearchClient() {final ClientConfiguration clientConfiguration = ClientConfiguration.builder().connectedTo("127.0.0.1:9200").build();return RestClients.create(clientConfiguration).rest();}
}

3.接下来就是正戏了，写业务逻辑层代码！！！进行SuggestBuilder创建，然后获取查询出来的结果(代码中的keyword就是查询匹配的结果内容)，返回给前端。

@Qualifier("elasticsearchClient")@Autowiredprivate RestHighLevelClient restHighLevelClient;/*** 智能匹配搜索* @param productDTO* @return*/@Overridepublic ResponseDTO<List<String>> suggestCompletionProduct(ProductDTO productDTO) {List<String> resultList = new ArrayList<>();CompletionSuggestionBuilder suggestion = SuggestBuilders.completionSuggestion("name.suggest").prefix(productDTO.getName()).skipDuplicates(true);SuggestBuilder suggestBuilder = new SuggestBuilder();suggestBuilder.addSuggestion("product", suggestion);SearchRequest searchRequest = new SearchRequest();SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();searchSourceBuilder.suggest(suggestBuilder);searchRequest.indices("campus_market").types("product").source(searchSourceBuilder);try {SearchResponse response = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);Suggest suggest = response.getSuggest();//SearchResponse response = elasticsearchRestTemplate.suggest(suggestBuilder, Product.class);int maxSuggestNum = 0; // 最多5个if (suggest != null) {List<? extends Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option>> entries= suggest.getSuggestion("product").getEntries();for (Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option> entry : entries) {for (Suggest.Suggestion.Entry.Option option : entry.getOptions()) {String keyword = option.getText().string();if (maxSuggestNum < 5) {resultList.add(keyword);maxSuggestNum++;} else {break;}}}}} catch (IOException e) {e.printStackTrace();return ResponseDTO.errorByMsg(CodeMsg.SYSTEM_ERROR);}return ResponseDTO.success(resultList);}

4.前端Vue要对用户输入的内容进行监听，然后调用接口获取数据。

 <div class="search-input"><el-input v-model="searchName" placeholder="搜一搜好货" @input="changeInput" clearable><el-select v-model="searchCategoryId" slot="prepend"><el-option label="全部类目" value="0"></el-option><el-option v-for="(item, index) in categoryList" :key="index" :label="item.name" :value="item.id"></el-option></el-select></el-input><div class="suggest-content"><div class="suggest-content-item" @click="toProductDetail(item.id)" v-for="(item, index) in suggestList" :key="index">{{item.name}}</div></div>
</div>

 changeInput(e) {let _this = this;// 函数节流，防止数据频繁更新，每300毫秒才搜索一次if (!this.timer) {this.timer = setTimeout(function(){_this.getSuggestList(e);_this.timer = null;},300)}},getSuggestList(e) {let _this = this;this.$ajax.post(process.env.VUE_APP_SERVER + "/product/suggest", {name: e}).then((response)=>{let resp = response.data;let resultList = [];if(resp.code === 0){let data = resp.data;_this.productList.forEach(item => {data.forEach(name => {if(item.name === name) {let val = {id: item.id,name: item.name};resultList.push(val);}})});}_this.suggestList = resultList;});}

 .suggest-content {position: absolute;background: #fff;width: 480px;margin-left: 110px;border: 1px solid #444444;z-index: 1;height: auto;max-height: 300px;overflow-y: auto;display: block;}.suggest-content-item {width: 98%;margin: 5px 5px;cursor: pointer;}.search-input .el-select {width: 110px;}.search-input {width: 590px;}

ElasticSearch Suggest Completion 智能补全技术整合SpringBoot+Vue实现相关推荐

JAVA--AI编程助手【代码智能补全工具】盘点，让AI提高你的编程效率
1. 什么是AI编程助手近几年,随着人工智能的迅速发展,AI在各行各业都有所应用. 特别是近两年,面向开发者的AI开发工具也是层出不穷,如GitHub Copilot.Codota.TabNine. ...
SpringCloud（9）— Elasticsearch聚合和自动补全
SpringCloud(9)- Elasticsearch聚合和自动补全一数据聚合 1.聚合的分类聚合(aggregations)可以实现对文档数据的统计,分析,运算.常见的聚合有三种: 1.桶 ...
ES系列、Elasticsearch Suggester API(自动补全）
1.概念 1.1 补全api主要分为四类 Term Suggester(纠错补全,输入错误的情况下补全正确的单词) Phrase Suggester(自动补全短语,输入一个单词补全整个短语) Comp ...
vscode css智能补全_强大的 VS Code入门
简介在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Co ...
智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板基础项目源码下载地址为: SpringMV ...
使用Gradle整合SpringBoot+Vue.js-开发调试与打包
为什么80%的码农都做不了架构师?>>> 非常感谢两位作者: kevinz分享的文章<springboot+gradle+vue+webpack 组合使用> 首席卖 ...
Elasticsearch 分布式搜索引擎 -- 自动补全（拼音分词器、自定义分词器、自动补全查询、实现搜索框自动补全）
文章目录 1. 自动补全 1.1 拼音分词器 1.2.1 自定义分词器 1.2.2 小结 1.2 自动补全 1.3 实现酒店搜索框自动补全 1.3.1 修改酒店映射结构 1.3.2 修改HotelDo ...
Elasticsearch高级使用-自动补全
一.概念注意事项为了避免搜索同音字,搜索时不要使用拼音分词器二.拼音分词器官网https://github.com/medcl/elasticsearch-analysis-pinyin 安装 ...
VSCode智能补全代码片段技巧
小技巧 foreach的代码片段中没有快速建议智能建议不优先推荐代码片段(试过也不大行) foreach的代码片段中没有快速建议通过快速建议输入一个foreach之类的代码片段,保持tab键可以切 ...

ElasticSearch Suggest Completion 智能补全技术整合SpringBoot+Vue实现

ElasticSearch Suggest Completion 智能补全技术整合SpringBoot+Vue实现相关推荐

最新文章

热门文章

ElasticSearch Suggest Completion 智能补全技术 整合SpringBoot+Vue实现

ElasticSearch Suggest Completion 智能补全技术 整合SpringBoot+Vue实现相关推荐

最新文章

热门文章

ElasticSearch Suggest Completion 智能补全技术整合SpringBoot+Vue实现

ElasticSearch Suggest Completion 智能补全技术整合SpringBoot+Vue实现相关推荐