vue inpt框搜索和保存历史记录

页面结果：

代码如下：
html:

<div class="search-container flex">
      <div class="euiFormControlLayout--fullWidth flex-1">
        <div class="shuruk" style="position: relative">
          <el-input
            v-model="searchss"
            style="flex: 1"
            clearable
            placeholder="请输入关键字"
            @focus="focus"
            @input="input"
            id="input"
            @keypress.native.enter="throttleChang"
          ></el-input>
          <div class="history" v-if="historyFlag" id="history">
            <div class="field">
              <div class="title">字段名称</div>
              <div class="record-item">
                <div
                  v-for="(item, index) in history.field"
                  :key="'field' + index"
                  class="record-list-item"
                  style="margin-bottom: 5px"
                >
                  <div
                    :id="'field' + index"
                    @click="handlePiteh(item)"
                    class="pointer search-history"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
            <div class="record">
              <div class="title">历史记录</div>
              <div class="record-item">
                <div
                  v-for="(item, index) in history.record"
                  :key="index"
                  class="record-list-item"
                >
                  <div
                    :id="'record' + index"
                    @click="handlePiteh(item)"
                    class="pointer search-history"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div
                class="blueColor pointer clearbtn"
                @click="clearData"
                v-show="history.record.length > 0"
              >
                清除历史记录
              </div>
            </div>
          </div>
        </div>
       
        <div class="search-s">
          <span @click="throttleSous">搜索</span>
        </div>
      </div>
      <div class="tips-calss">
        <span class="yufa" @click="dialogVisible = true">查询语法</span>
      </div>
    </div>

js:

data里面：
 history: {
        field: [],
        record: [],
      },
      historyFlag: false,
      historyRecord: [],
      historyField: [],

 qetSearchFields() {
      qetSearchFields().then(res => {
        this.history.field = res.data
        this.historyField = res.data
      })
    },
    //-------------------------------------------搜索记录提示---------------------------------
 
    removeRecordHeightLight() {
      if (this.historyFlag == true) {
        for (let i = 0; i < this.history.record.length; i++) {
          this.$nextTick(() => {
            if (document.querySelector("#record")) {
              document.querySelector("#record" + i).innerHTML =
                this.history.record[i];
            }
          });
        }
      }
    },
    removeFieldHeightLight() {
      if (this.historyFlag == true) {
        for (let i = 0; i < this.history.field.length; i++) {
          this.$nextTick(() => {
            if (document.querySelector("#field" + i)) {
              document.querySelector("#field" + i).innerHTML =
                this.history.field[i];
            }
          });
        }
      }
    },
    handleDeplicate(arr) {
      //去重
      let newArr = [];
      for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },
    focus() {
      this.historyFlag = true;
      // this.historyRecord = JSON.parse(localStorage.getItem("history2"));
      // this.history.record = this.historyRecord;
      // this.input(this.searchss);
      this.input();
    },
    clearData() {
      store.dispatch("setHistory2", JSON.stringify([]));
      this.history.record = [];
      this.historyRecord = [];
    },
    input() {
      this.historyFlag = true;
      this.historyRecord = JSON.parse(localStorage.getItem("history2"));
      this.history.record = this.historyRecord;
      let value = this.searchss;
      let arr = []; //历史记录
      let fieldArr = []; //字段名称
      for (let i = 0; i < this.historyRecord.length; i++) {
        if (this.historyRecord[i].indexOf(value) != -1) {
          arr.push(this.historyRecord[i]);
        }
      }
      for (let i = 0; i < this.historyField.length; i++) {
        if (this.historyField[i].indexOf(value) != -1) {
          fieldArr.push(this.historyField[i]);
        }
      }
      if (arr.length == 0) {
        this.history.record = this.historyRecord;
        this.removeRecordHeightLight();
      } else {
        this.history.record = arr;
        this.recordhighLight(value);
      }
      if (fieldArr.length == 0) {
        this.history.field = this.historyField;
        this.removeFieldHeightLight();
      } else {
        this.history.field = fieldArr;
        this.fieldhighLight(value);
      }
    },
    recordhighLight(value) {
      if (this.historyFlag == true) {
        for (let i = 0; i < this.history.record.length; i++) {
          let newTxt = this.history.record[i]
            .split(value)
            .join('<span style="color:#4388FC">' + value + "</span>");
          this.$nextTick(() => {
            if (document.querySelector("#record")) {
              document.querySelector("#record" + i).innerHTML = newTxt;
            }
          });
        }
      }
    },
    fieldhighLight(value) {
      if (this.historyFlag == true) {
        for (let i = 0; i < this.history.field.length; i++) {
          let newTxt = this.history.field[i]
            .split(value)
            .join('<span style="color:#4388FC">' + value + "</span>");
          this.$nextTick(() => {
            console.log(document.querySelector("#field" + i), "nets11");
            if (document.querySelector("#field" + i)) {
              document.querySelector("#field" + i).innerHTML = newTxt;
            }
          });
        }
      }
    },
    handlePiteh(value) {
      this.searchss = value;
      this.historyFlag = false;
      this.queryFn();
    },
    clickHistory(event) {
      const ev = window.event || event;
      const path = ev.composedPath && ev.composedPath();
      let that = this;
      let isHsa = path.find((_) => {
        return _.id === "input";
      });
      let isHsa2 = path.find((_) => {
        return _.id === "history";
      });
      if (isHsa || isHsa2) {
      } else {
        that.historyFlag = false;
      }
    },

js里面是注意点是：

created里 this.qetSearchFields(); 点击搜索请求成功时  if (this.listQuery.searchKeywords) {
          this.historyRecord.push(this.listQuery.searchKeywords)
        }                               this.listQuery.searchKeywords //这个变量是我定的搜索变量，你换成你的就行

 mounted() {
    window.addEventListener("click", this.clickHistory);
  },
  destroyed() {
    window.removeEventListener("click", this.clickHistory);
  },

css：

 .history {
    position: absolute;
    width: 740px;
    height: 300px;
    background-color: #ffffff;
    z-index: 999;
    border-radius: 4px;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    font-size: 13px;
    overflow: hidden;
    .field {
      width: 250px;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding-left: 19.5px;
      padding-right: 10px;
      padding-bottom: 40px;
      .title {
        height: 40px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 40px;
      }
      .record-item {
        flex: 1;
        overflow-y: auto;
      }
    }
    .record {
      flex: 1;
      box-shadow: 0px 1px 2px 0px rgba(0, 20, 61, 0.1);
      display: flex;
      flex-direction: column;
      padding-left: 19.5px;
      padding-right: 10px;
      .title {
        height: 40px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 40px;
      }
      .record-item {
        flex: 1;
        overflow-y: auto;
      }
      .clearbtn {
        height: 40px;
        line-height: 40px;
      }
    }
  }