搜索框的自动联想功能

一 后端实现

1 TeacherController

/**
* 功能描述：根据关键字查询讲师名列表
*
* @param key 搜索的关键字
* @return R 返回给前端数据
* @author cakin
* @date 2020/11/28
*/
@ApiOperation("根据关键字查询讲师名列表")
@GetMapping("list/name/{key}")
public R selectNameListByKey(@ApiParam(value = "关键字", required = true) @PathVariable String key) {
    List<Map<String, Object>> nameList = teacherService.selectNameList(key);
    return R.ok().data("nameList", nameList);
}
           

2 TeacherService

接口

/**
* 功能描述：根据关键字查询讲师名列表
*
* @param key 搜索的关键字
* @return List<Map<String,Object>> 讲师名列表
* @author cakin
* @date 2020/11/28
*/
List<Map<String,Object>> selectNameList(String key);
           

实现

/**
* 功能描述：根据关键字查询讲师名列表
*
* @param key 搜索的关键字
* @return List<Map < String, Object>> 讲师名列表
* @author cakin
* @date 2020/11/28
*/
@Override
public List<Map<String, Object>> selectNameList(String key) {
    // 构造查询列和查询条件
    QueryWrapper<Teacher> queryWrapper = new QueryWrapper<>();
    queryWrapper.select("name");
    queryWrapper.likeRight("name", key);
    // 执行查询
    List<Map<String, Object>> list = baseMapper.selectMaps(queryWrapper);
    return list;
}
           

二 前端实现

1 api

teacher.js

// 根据关键字联想
  selectNameListByKey(key) {
    return request({
      url: `/admin/edu/teacher/list/name/${key}`,
      method: 'get'
    })
  }
           

2 组件

views/teacher/list.vue 注意： value-key="name" 的设置

<el-form-item>
        <!-- v-model：查询条件绑定数据
        placeholder：提示信息
        -->
        <!-- <el-input v-model="searchObj.name" placeholder="讲师"/> -->
        <el-autocomplete
          v-model="searchObj.name"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          class="inline-input"
          placeholder="讲师名称"
          value-key="name" />
      </el-form-item>
           

查询脚本

// 搜索联想
    querySearch(queryString, callback) {
      teacherApi.selectNameListByKey(queryString).then(response => {
        callback(response.data.nameList)
      })
    }
           

三 测试