搜索框的自動聯想功能

一 後端實現

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

三 測試