搜索输入框建议提示（自动完成）功能实现

一、示例需求

二、后端接口

1、ListController

@ApiOperation("根据左关键字查询讲师名列表")
@GetMapping("/list/name/{key}")
public R selectNameListByKey(
        @ApiParam(value = "查询关键字", required = true)
        @PathVariable String key){
    List<Map<String, Object>> nameList = teacherService.selectNameListByKey(key);
    return R.ok().data("nameList", nameList);
}

2、ListrService

List<Map<String, Object>> selectNameListByKey(String key);

@Override
public List<Map<String, Object>> selectNameListByKey(String key) {
    QueryWrapper<List> queryWrapper = new QueryWrapper<>();
    queryWrapper.select("name");
    queryWrapper.likeRight("name",key);
    List<Map<String, Object>> list = baseMapper.selectMaps(queryWrapper);//返回值是Map列表
    return list;
}

三、前端整合

1、api

selectNameListByKey(key) {
  return request({
    url: `/list/name/${key}`,
    method: 'get'
  })
}

2、Element输入框组件

<el-form-item>
  <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) {
  listApi.selectNameListByKey(queryString).then(response => {
    callback(response.data.nameList)
  })
}

3、注意value-key默认值的修改

标签：queryWrapper,name,nameList,提示,List,输入框,搜索,key,selectNameListByKey
来源： https://blog.csdn.net/W211953332/article/details/112413790