输入框回车后在调用接口进行远程搜索功能
主要思路
默认的远程搜索会在输入框聚焦的时候就展示下拉弹窗，而我们需要的是在回车之后才展示下拉弹窗。
具体代码
<divv-for="(domain, index) in formData.domains"class="dynamic-input":key="domain.key"><el-form-item:prop="'domains.' + index + '.memberName'"label="会员名称"><div :class="{ formItemSearch: isHidden }"><el-autocompleteclass="inline-input"v-model.trim="domain.memberName":disabled="domain.mainFlag === 1":fetch-suggestions="querySearch":popper-append-to-body="false"placeholder="请输入会员名称"ref="autocomplete"@select="handleSelect"@keyup.enter.native="handleSearch(domain)"></el-autocomplete></div></el-form-item><el-form-item:prop="'domains.' + index + 'creditCode'"label="统一社会信用代码"><el-inputv-model="domain.creditCode":disabled="domain.mainFlag === 1"></el-input></el-form-item><el-button@click.prevent="removeDomain(domain)"v-if="domain.mainFlag === 0 && formData.domains.length > 2">删除</el-button><p v-if="domain.mainFlag === 1">主操作会员</p>
</div>
</div><script>
// 添加会员
addDomain() {this.formData.domains.push({memberName: "",mainFlag: 0,memberCode: "",creditCode: "",key: Date.now(),});
},
// 删除会员
removeDomain(item) {var index = this.formData.domains.indexOf(item);if (index !== -1) {this.formData.domains.splice(index, 1);}
},// 回车后搜索
handleSearch(domain) {this.isHidden = false; // 打开下拉框this.querySearch(domain.memberName, this.cbFun, false, domain);
},// 自动填写相应信用码
handleSelect(item) {this.formData.domains.filter((i) => {return item.key === i.key;})[0].creditCode = item.creditCode;// 选择完成后关闭下拉建议框this.isHidden = true;
},// 搜索
querySearch(queryString, cb, isHidden = true, domain) {let results = [];this.cbFun = cb;if (isHidden) {this.isHidden = true;} else {this.isHidden = false;// 调用企查查接口Api.getVipInfoByQcc(queryString).then(({ data: data }) => {if (data.data.length > 0) {this.qccList = data.data.map((item) => {return {value: item.name,creditCode: item.creditCode,No: item.No,key: domain.key,};});cb(this.qccList); } else {cb(results);}}).catch((err) => {cb(results);});}
}
</script>
<style >// 查询下拉框.formItemSearch .el-autocomplete .el-autocomplete-suggestion {display: none !important;}
</style>
