搜索框的自动联想功能

港控/mmm° 2021-07-24 15:05 455阅读 0赞

# 一 后端实现 #

## 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>
            
            
            <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)
          })
        }

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/f05bca95e06849eab32204f8e711ca3b.png