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>
相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript