效果

实现流程

首先我们需要在后端获取数据，我们可以根据name属性去模糊查询，返回Map类型的列表
然后将它返回给前端。

controller

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

service

 @Overridepublic List<Map<String, Object>> selectNameList(String key) {QueryWrapper<Teacher> queryWrapper = new QueryWrapper<>();queryWrapper.select("name").likeRight("name",key);List<Map<String, Object>> maps = baseMapper.selectMaps(queryWrapper);return maps;}

前端

我们使用的是Vue 的 elementUI给我们提供的Input组件

<el-autocompleteclass="inline-input"v-model="teacherQuery.name":fetch-suggestions="querySearch"placeholder="讲师名":trigger-on-focus="false"value-key="name"></el-autocomplete>

其中 :fetch-suggestions="querySearch" 是我们输入一个完整字符后进行的回调事件。
该函数有两个参数 queryString,callback ，queryString是我们v-model绑定的输入框值，callback是它内置给我们的回调函数。我们只需要将后端获取的数据传递即可。value-key="name"是要显示的值（对应着我们传递给callback的列表中的key）。

官方文档如下：

具体的代码：

// 讲师名输入建议querySearch(queryString,callback){// queryString 就是我们输入的值teacherApi.selectNameListByKey(queryString).then(response=>{console.log(response)callback(response.data.nameList);})}

前端的请求接口如下：

import request from '@/utils/request'export default{。。。 。。。// 根据关键字查询讲师名列表selectNameListByKey(key){return request({url:`/edu/teacher/list/name/${key}`,method:'get'})}
}

ElementUI+Java实现搜索提示列表相关推荐

java ajax搜索框提示,Javaweb-案例练习-2-给搜索框添加提示
Javaweb-案例练习-2-给搜索框添加提示凯哥java 凯哥java 给搜索框添加搜索提示功能这篇来利用Ajax做一个给搜索框添加搜索提示的功能,这个我们在百度首页,搜索框随便输入一个字符,就 ...
java es 搜索_使用elasticsearch从多个列表中搜索
我们有以下设置(简化/更改): MongoDB集合: Articles Redis列表: Today Yesterday This Week This Month 我们经常收到新文章,并将它们放入适当 ...
app里的“搜索提示“是如何实现的？
用程序员的角度科普生活知识 hello 兄弟们我是浩说今天研究个什么事儿呢? 咱就是说:我们在浏览器或者app里搜索的时候为什么我只输入了一两个字,下面就已经给我罗列出来我想搜的具体内容了这是 ...
Android SearchView介绍及搜索提示实现
本文主要介绍SearchView的使用.即时搜索提示功能的实现,以及一些设置. 1. layout文件 Java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?xm ...
elementui进度条如何设置_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...
Android AutoCompleteTextView控件实现类似百度搜索提示，限制输入数字长度
Android AutoCompleteTextView 控件实现类似被搜索提示,效果如下 1.首先贴出布局代码 activity_main.xml: <?xml version="1 ...
Ajax实现搜索提示框~超级详细
以下是对Ajax搜索提示框的整理,希望可以帮助到有需要的小伙伴~ 文章目录静态页面用户的操作是用事件来处理的源码静态页面搜索框 input 提示框无序列表加容器 div 做样式 [默认不 ...
JQueryUI自动补全搜索提示实践
最近在做航运运价平台,有一个业务逻辑是需要在搜索的时候有搜索提示的,没法子,没写过,在找了很久解决方案还没有找到,快崩溃了的时候,忽然发现了jquery UI 的自动补全机制,完全符合啊,大救星. 首 ...
Java全文搜索怎么弄的_全文搜索简介
数据的分类结构化数据具有固定格式.有限⻓度的数据,一般用关系数据库来处理. 非结构化数据全⽂数据,⽆固定格式.不定⻓,比如邮件.word⽂档内容. 非结构化数据的2种处理方式顺序扫描从前往后 ...

ElementUI+Java实现搜索提示列表

效果

实现流程

controller

service

前端

ElementUI+Java实现搜索提示列表相关推荐

最新文章

热门文章