做包皮医院网站百度手机版下载

项目中会使用掉后端的接口来完成远程搜索,看官方文档写的可能有些繁琐,在此记录下,在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", this.encode(find)).then(res => {if (res.success == 'true') {var result = res.result//循环放到一个远程搜索需要的数组for (let i = 0; i < result.length; i++) {const element = result[i];results.push({value: element.full_name,id: element.customer_id})}cb(results);} else {results = []cb(results);}});}},//点击出现搜索后点击的每一项handleSelect(item) {this.id = item.idthis.name = item.value},},}