点击输入框弹出搜索框，输入关键字进行大量数据的搜索

1、点击弹出框的设置

 <el-form-item label="病例标签">
            <!-- <el-col :sm="22" :lg="20"> -->
            <el-popover placement="bottom" width="500" trigger="click">
              <div style="font-size: 14px">
                <el-input
                  style="width: 65%; margin-right: 1%"
                  size="mini"
                  v-model="cases"
                  class="search_name"
                  @input="changetag($event)"
                  placeholder="输入疾病标签关键字进行过滤搜索"
                ></el-input>
                <el-button type="primary" size="mini" @click="resetCasesTag"
                  >重置输入框</el-button
                >
              </div>
              <div
                class="titleCard"
                v-for="(item, index) in searchImport"
                :key="index"
              >
                <li
                  class="smallTItle"
                  v-for="(i, key) in item.title"
                  :key="key"
                  @click="casesCard(i, key)"
                  :class="{ activeColor: casesCode == i.code }"
                >
                  {{ i.name }}
                </li>
              </div>
              <template slot="reference">
                <!-- @input="changeMessage($event)" -->
                <el-input
                  :readonly="true"
                  @blur="changeMessage($event)"
                  v-model="casesDetail.tag"
                  placeholder="请选择疾病标签"
                  size="mini"
                  style="width: 80%; display: inline-block"
                  ref="caseblu"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i
                ></el-input>
                <el-button
                  style="margin-left: 1%; display: inline-block"
                  type="primary"
                  plain
                  size="mini"
                  @click="deleteCasesTag"
                  >删除</el-button
                >
              </template>
            </el-popover>
            <!-- </el-col> -->
          </el-form-item>

2、效果图

3、设置点击输入和删除等功能

//这里是点击下方的搜索条目的时候的事件。其实很多是项目中的逻辑代码，有一些对于其他项目的应用不是很需要，这里其实可以不用看
 drugCard(i) {
     
      this.casesDetail.drug_code = '';
      // 把旧值复值给一个变量
      this.oldDrugName = this.drugName;
      this.drugFlag = 1;
      // 把绑定的数值进行改变
      this.drugName = i.name;
      this.oldDrugCode = this.drugCode;
      this.drugCode = i.code;

      if (
        this.oldDrugName == this.drugName &&
        this.drugCode != this.oldDrugCode
      ) {
        this.getdrugData();
      }
      if (this.drugData) {
        for (const tag of this.drugData) {
          if (this.drugName == tag.name) {
            this.drugFlag = 0;
          }
        }
      }

      if (this.drugCode != this.oldDrugCode && this.drugFlag == 1) {
        this.drugData.push(i);
        if (!this.casesDetail.drug) {
          this.casesDetail.drug = this.drugName;
        } else {
          this.casesDetail.drug = this.casesDetail.drug + '、' + this.drugName;
        }
        // 点击存入的和返回的不一样
        for (const item of this.drugData) {
          if (!this.casesDetail.drug_code) {
            this.casesDetail.drug_code = item.code;
          } else {
            this.casesDetail.drug_code =
              this.casesDetail.drug_code + '、' + item.code;
          }
        }
      }
    },

4、当输入框输入的时候进行每隔一段时间发送请求获取内容

  watch: {
 
    cases() {
      if (this.cases == '') {
        this.casesCode = '';
        this.getSearchTitleCases();
        // this.countNum = 1;&& this.status != 1
      } else if (this.cases != '') {
        this.cur = '';
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.getSearchTitleCases(this.casesCode || this.cases);
          this.casesCode = '';
          // this.countNum++;
        }, 300);
      }
    },
 
  },

5、一些输入框的事件，看着添加

// 强制更新测试文本信息框的值，焦点失去事件
    changeMessage() {
      this.$forceUpdate();
    },
 // 搜索疾病标签的输入框事件，输入事件
    changetag() {
      this.casesCode = '';
    },

6、删除的事件

 // 删除疾病标签的按钮
    deleteCasesTag() {
      if (this.tagData && this.addY) {
        this.data = this.tagData;
      }
      this.data.splice(this.data.length - 1, 1);
      // this.resetCases();
      this.$refs.caseblu.focus();
      this.$refs.caseblu.blur();
      this.casesDetail.tag_code = '';
      this.casesDetail.tag = '';
      for (const item of this.data) {
        if (!this.casesDetail.tag_code) {
          this.casesDetail.tag_code = item.code;
          this.casesDetail.tag = item.name;
        } else {
          this.casesDetail.tag_code =
            this.casesDetail.tag_code + '、' + item.code;
          this.casesDetail.tag = this.casesDetail.tag + '、' + item.name;
        }
      }
    },