vue中模糊查询中显示搜索过的历史

效果如图：

1.在搜索框下添加显示列表ul

  <el-form-item label="采集人" prop="measurer">
        <el-input
          v-model="queryParams.measurersName"
          placeholder="请选择采集人"
          clearable
          size="small"
          @clear = "queryParams.measurers=null"
          @input="changeMeasurer"
        />
        <ul v-if="measurerOptionsBySearch.length>0" class="showUl">
          <li v-for="value in measurerOptionsBySearch" @click="changeMeasurerBySelect(value)" style="line-height: 30px;display: block">{{value.userName}}</li>
        </ul>
      </el-form-item>

2.在data中定义存储搜索历史的数据对象 measurerOptionsBySearch

 measurerOptionsBySearch:[],

3.定义点击历史数据的方法

  changeMeasurerBySelect(value){
        this.queryParams.measurersName = value.userName;
        this.queryParams.measurers = [value.userId];
        this.measurerOptionsBySearch = [];
      },

4.定义输入框输入的方法 changeMeasurer 把搜索的关键字存到 上面定义的搜索数据对象measurerOptionsBySearch 中

 changeMeasurer(){
        if(this.searchTimeout){
          clearTimeout(this.searchTimeout);
        }
        if(this.queryParams.measurersName!=''){
          const self  =this;
          this.searchTimeout = setTimeout(function(){
            self.measurerOptionsBySearch = [];
            for(let i=0,len=self.measurerOptions.length;i<len;i++){
              if(self.measurerOptions[i].userName.indexOf(self.queryParams.measurersName)>=0){
                self.measurerOptionsBySearch.push(self.measurerOptions[i]);
              }
            }
          },500);
        }
      },

5.下拉数据

 /** 查询采集人员 */
      getMeasurer(projectIds, callback) {
        showMeasurer(projectIds).then(response => {
          this.measurerOptions = response.rows;
          if (callback)
            callback();
        });
      },

6.定义显示历史列表的样式

 .showUl{
    padding-left: 15px;
    position: absolute;
    z-index: 1;
    background: #fff;
    margin-top: 0;
    width: 100%;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    li{
      display: block;
      line-height: 30px;
      cursor: pointer;
    }
    li:hover{
      background: #F5F7Fa;
    }
  }