效果

實現流程

首先我們需要在后端獲取數據，我們可以根據name屬性去模糊查詢，返回Map類型的列表
然后將它返回給前端。

controller

@ApiOperation("根據關鍵字查詢講師名列表")@GetMapping("list/name/{key}")public ResultVo selectNameListByKey(@ApiParam(name="key",value = "關鍵字") @PathVariable("key") String key){List<Map<String,Object>> nameList = teacherService.selectNameList(key);return ResultVo.ok().data("nameList",nameList);}

service

@Overridepublic List<Map<String, Object>> selectNameList(String key) {QueryWrapper<Teacher> queryWrapper = new QueryWrapper<>();queryWrapper.select("name").likeRight("name",key);List<Map<String, Object>> maps = baseMapper.selectMaps(queryWrapper);return maps;}

前端

我們使用的是Vue 的 elementUI給我們提供的Input組件

<el-autocompleteclass="inline-input"v-model="teacherQuery.name":fetch-suggestions="querySearch"placeholder="講師名":trigger-on-focus="false"value-key="name"></el-autocomplete>

其中 :fetch-suggestions="querySearch" 是我們輸入一個完整字符后進行的回調事件。
該函數有兩個參數 queryString,callback ，queryString是我們v-model綁定的輸入框值，callback是它內置給我們的回調函數。我們只需要將后端獲取的數據傳遞即可。value-key="name"是要顯示的值（對應著我們傳遞給callback的列表中的key）。

官方文檔如下：


具體的代碼：

// 講師名輸入建議querySearch(queryString,callback){// queryString 就是我們輸入的值teacherApi.selectNameListByKey(queryString).then(response=>{console.log(response)callback(response.data.nameList);})}

前端的請求接口如下：

import request from '@/utils/request'export default{。。。 。。。// 根據關鍵字查詢講師名列表selectNameListByKey(key){return request({url:`/edu/teacher/list/name/${key}`,method:'get'})} }

總結

以上是生活随笔為你收集整理的ElementUI+Java实现搜索提示列表的全部內容，希望文章能夠幫你解決所遇到的問題。

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