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

 @Override
    public 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-autocomplete
      class="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'

        })
    }
}