Element-ui中input输⼊框远程搜索的使⽤⽅法项⽬中会使⽤掉后端的接⼝来完成远程搜索,看官⽅⽂档写的可能有些繁琐,在此记录下,在vue项⽬中如何使⽤远程搜索来实现的效果图:
HTMl:
<el-form-item label="素材名称:">
<el-autocomplete class="width250"size="mini"v-model="name"
:fetch-suggestions="querySearchAsync"@select="handleSelect"
placeholder="请输⼊素材名称">
</el-autocomplete>
</el-form-item>
JS:
export default{
data(){
return{
id:'',
name:'',
timeout:null,
}
},
methods:{
querySearchAsync(queryString, cb){
clearTimeout(this.timeout);
var results =[]
if(queryString ==''){
cb(results);
}else{
//掉接⼝需要的参数
var find ={
keyword: queryString,//上⾯输⼊框绑定的数据
type:0
};
//这⾥去掉后端的接⼝.根据⾃⼰接⼝的情况进⾏赋值
this.$post("/customer-search",de(find)).then(            res =>{
if(res.success =='true'){
var result = sult
//循环放到⼀个远程搜索需要的数组
for(let i =0; i < result.length; i++){
const element = result[i];
results.push({
value: element.full_name,
id: element.customer_id
})
}
cb(results);
onpaste不能用input}else{
results =[]
cb(results);
}
}
);
}
},
//点击出现搜索后点击的每⼀项
handleSelect(item){
this.id = item.id
this.name = item.value
},
},
}