首先官网的写法:
然后为了验证能不能用,我几乎完全复制它所有的内容了,还是没有加载出来
很多网上说的时数据参数要存在{"value"}值,可demo就是value的值啊,为何还是没有显示,直到我看的这个:element 自动搜索 el-autocomplete,不显示结果_扮老虎的猪的博客-CSDN博客
发现它的方法可用,就能实现。
<el-autocomplete style="width: 58%;"
v-model="search_text"
value-key="address"
:fetch-suggestions="search"
:trigger-on-focus="false"
placeholder="请输入内容"
size="small"
></el-autocomplete>
search(querystring, callback){
setTimeout(()=>{
const data = [{ "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" }]
callback(data)
}, 1000)
}
后面发现问题还是出在:
loadAll()获取的数据上,具体原因没有了解,但是
所有不要用官网的demo中的loadAll()这些参数,自己赋值一个,或者发送接口请求,其他的没有变
querySearchAsync(queryString, cb) {
var _this=this;
axios.get('http://xxxx/xxxx/id=1234').then(function (response) {
console.log("response:", response.data);
if(response.data.code == 20000){
var restaurants = response.data.address;
var results = queryString ? restaurants.filter(_this.createStateFilter(queryString)) : restaurants;
setTimeout(()=>{
cb(results)
}, 1000)
}
});
},
扩展:
再html使用value-key=“address”是会限制address的内容,不是显示value的,但是搜索都是value的