输入框回车后在调用接口进行远程搜索功能
主要思路
默认的远程搜索会在输入框聚焦的时候就展示下拉弹窗,而我们需要的是在回车之后才展示下拉弹窗。
具体代码
html
<div
v-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-autocomplete
class="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-input
v-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>