ElementUI+Java实现搜索提示列表

效果

在这里插入图片描述

实现流程

首先我们需要在后端获取数据，我们可以根据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'})}
}