效果演示視頻和教學講解視頻地址：演示地址

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实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。