创新实训博客（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. 自动补全接口

// 搜索补全
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 ? suggestL