el-autocomplete组件自动补全流程
1. 设置trigger-on-focus参数为false,这代表着只有输入内容改变以后才会补全。
2. 当检测到内容变化时,会调用fetch-suggestions指定的函数。
3. 假定这个函数是querySearch,参数是string和callback。
4. 根据string匹配一个列表(通过向后端发起请求)。
5. 调用callback设置自动补全的下拉列表。
一些注意的点
1. 返回的result列表,补全关键词一定是value,就是[ { value: 'test' } ]这种形式。
2. 必须调用callback,才能在下拉列表显示。
具体的代码
1. 自动补全接口
// 搜索补全
export function searchAutoComplete(word) {
return request({
url: '/es/hint',
method: 'get',
params: { key: word }
})
}
2. js调用
querySearch(queryString, callback) {
searchAutoComplete(queryString).then(response => {
const { data } = response
var suggestList = []
for (var i in data) {
suggestList.push({ value: data[i] })
}
var results = queryString ? suggestList.filter(this.createFilter(queryString)) : suggestList
// 调用 callback 返回建议列表的数据
callback(results)
})