输入框远程搜索

实现效果：在输入框输入相关参数（查找字段）来查询想要的信息，并选择。

效果解说：实现远程搜索的位置是“技术员”，通过手机号精准查找某个人，并选择他。我这块后端要求返回的是该人的ID。
环境：vue + element ui
代码块：

这块只展示主要的html代码
<el-col :span="2">
    <div style="text-align:right;">技术员</div>
</el-col>
<el-col :span="4">
    <el-form-item prop="workarea_user">
        <el-autocomplete v-model="workareaForm.workarea_user" :fetch-suggestions="querySearch" @select="handleSelect" placeholder="手机号精准查询" clearable ></el-autocomplete>
    </el-form-item>
</el-col>

export fefault{
	data(){
		return {
			workareaForm : {},   //表单
			workarea_user:'',  //技术员
        	sdgs_user_id:''  //定义技术员ID
		}
	}
}

methods:{
	querySearch(queryString,cb){
            //console.log(queryString)   //输入框的值
            // console.log(cb)   //回调函数
            var string = String(queryString)  //这里转为string的好处是：1.防止复制粘贴的value，因为我在调试时，报length没有定义，这样写就解决的这个问题；2.便于下一步的判断
            if(string.length > 10){  //根据string长度来限制接口的访问次数
                this.$http.get('/api/xxxx/xxx/?account=' + this.workareaForm.workarea_user).then(res => {
                    cb(res.data.data)   //重点：切记让后端response的数据中必有value属性，猜测这是el-autocomplete的特有属性要求，数据格式要求array：[{id:1,value:"Tom"},{id:2,value:"网三"},{id:3,value:"汉鸿"}]
                })
            }
        },
        //@select=handleSelect()
        handleSelect(item){
            //console.log(item.id)     //item包含了你选择的人员的所有属性
            this.sdgs_user_id = item.id  //这里我根据后端要求需返回查找的人员ID
        },
}

亲测有效！！！