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>

原文地址：https://blog.csdn.net/lalala_dxf/article/details/142693769

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！