vue el-input 输入框下拉显示匹配数据

1、效果图：

2、需求&实现：

输入条件 下面匹配查询到的数据有多少个 需要调用后端接口展示，后端查询到之后返回条数 前端展示

3、具体代码实现：

html： 图片需要自己根据实际情况增加  // 查询 重置 筛选  本文章只写查询 重置和更多筛选逻辑自行添加

<div
          class="topsearch"
          ref="topsearch"
        >
          <div class="top-search-group">
            <el-popover
              placement="bottom"
              width="500px"
              trigger="manual"
              v-model="visible"
              ref="popover"
              popper-class="peopleselectpopper"
            >
              <div
                class="linkagediv"
                v-for="(item,index) in querylist"
                :key="index"
              >
                <div @click="linkagedivclick(item)">{{item.querytype}}：<span :class="{spandata:number(item.number)>0,spannodata:number(item.number)==0}">{{item.number}}</span>条</div>
              </div>
              <div
                style="display:flex;"
                slot="reference"
              >
                <el-input
                  width="500px"
                  placeholder="请输入查询条件1/查询条件2/查询条件3/查询条件4/查询条件5/查询条件6"
                  size="medium"
                  @input="debouncedinput"
                  @click.native="openpopover"
                  v-model="querydatalabel"
                  ref="input"
                >
                </el-input>
                <div
                  class="searchbtn"
                  style="font-size:20px;width: 46px;height: 40px;padding:0px"
                  @click="getgriddataevt('search', true)"
                >
                  <img
                    src="../../assets/images/search.png"
                    alt=""
                  >
                </div>
              </div>

            </el-popover>
            <div
              class="iconbtn"
              @click="getgriddataevt('reset')"
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="重置"
                placement="top"
              >
                <img
                  src="../../assets/images/chongzhi.png"
                  alt=""
                ></el-tooltip>
            </div>

            <el-tooltip
              class="item"
              effect="dark"
              content="筛选"
              placement="top"
            >
              <div
                class="iconbtnshaixuan"
                :class="{active:!searchfilterflag}"
                @click="searchfilterflagclick()"
              >
                <img
                  v-if="!searchfilterflag"
                  src="../../assets/images/shaixuanclick.png"
                  alt=""
                >
              </div>
            </el-tooltip>
          </div>
        </div>

js代码逻辑

//接口需要自己引入
import { selectnum } from "@/api/xxxx"
export default {
    data() {
      return {
       searchfilterflag: false,
       visible: false,
        //初始的一些查询条件
       searchdata: {
        querydata: "",
        orderbykeyword: "",
        ascordesc: "",
        orderbyrule: "",
      },
       querydatalabel: "",
       querylist: [
        {
          querytype: `查询条件1`,
          queryparam: "workno",
          number: 0,
        },
        {
          querytype: `查询条件2`,
          queryparam: "personname",
          number: 0,
        },
        {
          querytype: `查询条件3`,
          queryparam: "pmpname",
          number: 0,
        },
        {
          querytype: `查询条件4`,
          queryparam: "phone",
          number: 0,
        },
        {
          querytype: `查询条件5`,
          queryparam: "graduationinstitution",
          number: 0,
        },
        {
          querytype: `查询条件6`,
          queryparam: "insurancesplace",
          number: 0,
        },
      ],
      timer: null,
      queryparam: "",
      }
    },
    mounted() {
        //增加一个全局监听 方便点击其他位置可以关闭el-popover
        document.addeventlistener('click', this.handledocumentclick);
    },
    methods: {
    //点击查询条件的每一条数据
     linkagedivclick(item) {
      this.visible = false;
        // 我们需要把这个值给后端传过去
      this.queryparam = item.queryparam;
        // 原本的查询条件中 searchdata 所有值需要置空
      for (let key in this.searchdata) {
          this.searchdata[key] = ""
      }
      this.searchdata[item.queryparam] = this.querydatalabel;
        //去调用查询接口 
      this.getgriddataevt('search', false)
    },
    openpopover() {
      this.visible = true;
      this.debouncedinput(this.querydatalabel)
    },
    // 下拉框查询接口
    debouncedinputapi(val) {
      selectnum({ querydata: val }).then(res => {
        if (res.code == 200) {
          let data = res.data
          this.querylist.foreach(item => {
            for (let key in data) {
              if (item.queryparam == key) {
                item.number = data[key]
              }
            }
          })
        } else {
          this.$message.error('数据获取失败');
        }
      }).catch(err => {
        this.$message.error(err.msg);
      })
    },
    // 输入框触发
    debouncedinput(val) {
      cleartimeout(this.timer);
      //   防抖
      this.timer = settimeout(() => {
        this.debouncedinputapi(val)
      }, 500);
    },
    },
    beforedestroy() {
        //清除定时
      cleartimeout(this.timer);
        // 移除监听
      document.removeeventlistener('click', this.handledocumentclick);
    },

}

样式style  具体效果还是需要自己微调 

.topsearch {
        height: 80px;
        width: calc(100% - 20px);
        display: flex;
        align-items: center;
        justify-content: center;
        .top-search-group {
          height: 40px;
          width: 750px;
          display: flex;
          align-items: center;
          span {
            width: 100%;
          }
          ::v-deep .el-input__inner {
            height: 40px;
            border-radius: 4px 0 0 4px;
          }
          ::v-deep .el-input-group__append {
            background: #0096f1;
            color: #fff;
          }
          .searchbtn {
            cursor: pointer;
            background: #008ee4;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 4px 4px 0;
          }
          .iconbtn {
            margin-left: 10px;
            width: 42px;
            height: 40px;
            cursor: pointer;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .iconbtnshaixuan {
            margin-left: 10px;
            width: 42px;
            height: 40px;
            cursor: pointer;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            background: url("../../assets/images/shaixuan.png");
            background-repeat: no-repeat;
            background-position: center center;
            &:hover {
              background: url("../../assets/images/shaixuanclick.png");
              background-repeat: no-repeat;
              background-position: center center;
            }
          }
          .active {
            background: #ebf7ff;
            border-radius: 4px;
            border: 1px solid #cbebff;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover {
              background: #ebf7ff;
            }
          }
        }
      }