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

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

主要思路

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

具体代码

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>
相关推荐
excel6 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着6 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友7 小时前
什么是API签名?
前端·后端·安全
会豪9 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子9 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶9 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子9 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_10 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233310 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin10 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js