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
},
},
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。