vue elementui 实现异步搜索功能，el-autocomplete带有提示的搜索

vue elementui 实现异步搜索功能，el-autocomplete带有提示的搜索

效果图

樱花背景特效教程链接：樱花背景特效教程

vue中html调用

属性作用
input是搜索框内容的数据双向绑定
querySearch是即时处理(在此方法里调用axios方法并返回提示)
handleSelect是点击提示之后的操作(我这写的是跳转博客页面)

<div id="inline-input" >
            <el-autocomplete
                    class="inline-input"
                    v-model="input"
                    :fetch-suggestions="querySearch"
                    placeholder="搜索博客"
                    :trigger-on-focus="false"
                    @select="handleSelect">
            </el-autocomplete>
        </div>

在script标签中

queryString是输入的内容(即用户搜索的内容)
this.searchBlog(queryString)是我的axios方法

method:{
	querySearch(queryString, cb) {
                var sblogs=[]
                this.searchBlog(queryString).then(res=>{
                    // console.log(res.data.data.length)
                    if(res.data.data.length==0){
                    //没有找到
                        sblogs.push({id:0,value:'没有找到该博客'})
                    }else{
                        for(let i=0;i<res.data.data.length;i++){
                        //转换成id和value属性的对象数组
                            sblogs.push({id: res.data.data[i].blogId,value: res.data.data[i].title})
                        }
                    }
                })
                //返回提示
                cb(sblogs);
            },
            handleSelect(item) {
                if(item.id!=0){
                    //点击提示后需要做的操作，例如跳转页面等
                }
            },
},
data:function(){
	return{
		input: '',
        select: '',
	}
}