1. 前言

为了让搜索框更加人性化，带提示信息的更加适合我们的需求。

2. 后端代码的编写

在编写前端代码之前，我们需要获取提示的信息，需要从后端获取。根据我们的需求，我们需要获取提示信息：学生姓名和学号。

2.1 mapper的xml

sql语句如下

<!--学生部分信息获取-->
<select id="stuPartInfoSel" resultMap="BaseStuMap">
    select stu_name, stu_no from student
</select>
  • 1.
  • 2.
  • 3.
  • 4.
2.2 dao层
List<Student> stuPartInfoSel();
  • 1.
2.3 service 接口
List<Student> getStuPartInfo();
  • 1.
2.4 service 实现类
@Override
public List<Student> getStuPartInfo(){
    return stuDAO.stuPartInfoSel();
}
  • 1.
  • 2.
  • 3.
  • 4.
2.5 controller
@RequestMapping(value = "/stu_name/&/stu_no/get", method = RequestMethod.GET)
    public JSONObject getStuNameAndNo(){
        List<Student> stuNameList = stuService.getStuPartInfo();
        JSONObject result = new JSONObject();
        result.put("stuNameList",stuNameList);

        return result;
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

3. 前端代码的编写

<el-autocomplete
            popper-class="my-autocomplete"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect">
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
             >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.stuName }}</div>
              <span class="addr">{{ item.stuNo }}</span>
            </template>
          </el-autocomplete>

<style>
  .stuName {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .stuNo {
    font-size: 12px;
    color: #b4b4b4;
  }
</style>

<script>
  export default {
    data() {
      return {
      //提示信息
        stuNameList: [],
        state: ''
      };
    },
    methods: {
    //搜索框查询
      querySearch(queryString, cb) {
      // 如果提示信息为空，则查询提示信息
        if (this.stuNameList.length === 0) {
          this.getAllStuNameAndNo();
        }
        var stuInfos = this.stuNameList;
        var results = queryString ? stuInfos.filter(this.createFilter(queryString)) : stuInfos;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      //过滤
      createFilter(queryString) {
        return (stuInfos) => {
        // 根据学生姓名和id都可以进行过滤
          return (stuInfos.stuName.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
            stuInfos.stuNo.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      // 点击提示信息，查询
      handleSelect(item) {
        this.state = item.stuName;
        this.searchMess.stuName = item.stuName;
        this.searchMess.stuNo = item.stuNo;
        this.searchMess.classId = '';
        this.searchMess.stuAge1 = '';
        this.searchMess.stuAge2 = '';

        this.pagination.pageNum = 1;
        this.pagination.pageSize = 10;

        this.getStudentList();
      },
    }
  }
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.

微服务和VUE入门教程(12)：前端提示搜索框的实现_提示信息


微服务和VUE入门教程(12)：前端提示搜索框的实现_javascript_02

4. 刷新功能

我们发现，精确查询之后，如果想要看到全部信息，只能刷新页面。我们肯定不想这么麻烦，于是我们做一个伪刷新的功能，只是刷新数据，并不刷新界面。

如上图所示，我们在添加的按钮旁添加了一个刷新的按钮。

<span class="el-icon-refresh" style="cursor:pointer;" @click="refreshPage">刷新</span>
  • 1.

刷新方法

初始化页面一样。

//刷新页面
refreshPage() {
  this.searchMess.stuName = '';
  this.searchMess.stuNo = '';
  this.searchMess.classId = '';
  this.searchMess.stuAge1 = '';
  this.searchMess.stuAge2 = '';

  this.pagination.pageNum = 1;
  this.pagination.pageSize = 10;
  this.state = '';
  this.getStudentList();

}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.