创新实训博客（42）——搜索界面自动补全的前端处理

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. 自动补全接口

[code]// 搜索补全
export function searchAutoComplete(word) {
return request({
url: '/es/hint',
method: 'get',
params: { key: word }
})
}

2. js调用

[code]    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)
})

显示效果