ElementUI 2.x 输入框回车后在调用接口进行远程搜索功能

输入框回车后在调用接口进行远程搜索功能

主要思路

默认的远程搜索会在输入框聚焦的时候就展示下拉弹窗，而我们需要的是在回车之后才展示下拉弹窗。

具体代码

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