别人带做的网站关闭了权限咋办/百度新闻官网
1. 前言
为了让搜索框更加人性化，带提示信息的更加适合我们的需求。
2. 后端代码的编写
在编写前端代码之前，我们需要获取提示的信息，需要从后端获取。根据我们的需求，我们需要获取提示信息：学生姓名和学号。
2.1 mapper的xml
sql语句如下
select stu_name, stu_no from student2.2 dao层
List stuPartInfoSel();2.3 service 接口
List getStuPartInfo();2.4 service 实现类
@Overridepublic List getStuPartInfo(){ return stuDAO.stuPartInfoSel();}2.5 controller
@RequestMapping(value = "/stu_name/&/stu_no/get", method = RequestMethod.GET) public JSONObject getStuNameAndNo(){ List stuNameList = stuService.getStuPartInfo(); JSONObject result = new JSONObject(); result.put("stuNameList",stuNameList); return result; }3. 前端代码的编写
popper- v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"> slot="suffix" > {{ item.stuName }} {{ item.stuNo }} .stuName { text-overflow: ellipsis; overflow: hidden; } .stuNo { font-size: 12px; color: #b4b4b4; } 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(); }, } }
4. 刷新功能
我们发现，精确查询之后，如果想要看到全部信息，只能刷新页面。我们肯定不想这么麻烦，于是我们做一个伪刷新的功能，只是刷新数据，并不刷新界面。
如上图所示，我们在添加的按钮旁添加了一个刷新的按钮。
刷新刷新方法
初始化页面一样。
//刷新页面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();}