el-autocomplete远程搜索组件
需求:填写文本框时,能够实时显示数据库中的对应信息,方便用户查找信息
方法:利用el-autocomplete远程搜索组件
效果如下:
点击输入框能够显示数据库表中的所有用户姓名,输入用户部分信息,能够匹配下拉框中能够出现对应搜索建议。
vue代码如下:
<el-autocomplete size="mini" v-model="name"
:fetch-suggestions="getnameoptions"
@select="handleSelect"
:trigger-on-focus="true"
placeholder="请输入姓名"
>
</el-autocomplete>
fetch-suggestions是获取搜索建议的方法,select是选中后触发的事件,trigger-on-focus是聚焦时是否触发,true时,聚焦即可显示搜索建议内容,false时,需要输入内容,才能显示搜索建议内容。
handleSelect () {
console.log(this.name)
},
getnameoptions (queryString, cb) {
// cb是回调函数
var results = []
this.$http({ // 从后端获取数据
url: this.$http.adornUrl('你的url'),
method: 'get',
params: this.$http.adornParams({
'name': this.name // 输入框内容
})
}).then(({data}) => {
if (data && data.code === 0) {
for (var i = 0; i < data.info.length; i++){
// 将后端返回的数据push到results中,autocomlete只识别value字段并在下拉框中显示
results.push({value: data.info[i].name,id: data.info[i].id})
}
cb(results)
} else {
results = []
cb(results)
}
})
}
数据库查询代码:
这里采用了模糊查询,当name的开始字段与前端传递来的name匹配时,返回所有匹配的姓名和id
<select id="queryNameAndId" resultType="java.util.LinkedHashMap">
select id,name from user where name like #{name}"%"
</select>