el-autocomplete uses

1. Achievement effect: Pass the input value to the interface for getting the nickname list, get the related nickname list, and echo it.

 2. Implementation steps

<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"         
  placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>

v-model="namenick" The input value is displayed by namenick

:fetch-suggestions="searchNameNick" : Returns the method to get the data, that is to say, the input box gets the focus once. This method will be called automatically to get the data.

select="handleSelect" : This method is called when a suggestion is selected.
 

 async searchNameNick(queryString, callBack){
       //整理参数
        const params ={
            nickname:queryString,
            sys_code:4,
            page:1,
            page_size:100
        }
        // 定义空数组来接收返回的数据
        let nicknameList = []
        let res = await this.$proxy({
            url: `xxxx`,
            method: 'get',
            params
        })
        if(res.code == 0){
            //如果搜索结果为空返回“无匹配结果”
            if(res.data.items.length == 0){
                nicknameList.push({
                    value :"无匹配结果",
                    id : -1
                })
                callBack(nicknameList)
            }else{
            //对获取的值进行遍历，调整数据结构，value
                for (let i = 0; i < res.data.items.length; i++) {
                    console.log('111');
                    nicknameList.push({
                        value: res.data.items[i].nickname,
                        id: res.data.items[i].user_id
                    })
                }
                clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    callBack(nicknameList)
                    //通过callBack函数将回显数据返回
                }, 1000)
            }
        }else{
            this.$message({
                type: 'error',
                message: '请求失败'
            });
        }
    },

NOTE: Feature complete.
It should be noted that the echoed value must be an object array, and the object property name is "value", otherwise the echo fails
queryString, callBack these two parameters are also the component itself, callBack is a method used to resolve the result; queryString is the keyword entered by the user.