搜索框模糊查询（带搜索历史纪录及搜索建议）

<template>
  <div>
    <el-autocomplete
      class="inline-input"
      clearable
      v-model="state1"
      :debounce="0"
      :select-when-unmatched="unmatched"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @clear="firstHouse"
      @select="handleSelect"
      @keyup.native.enter="setIntoStorage"
    ></el-autocomplete>
   <el-button type="primary"  icon="el-icon-search"   @click="setIntoStorage"
      >搜索</el-button
    >
    <el-button type="danger" icon="el-icon-delete"   @click="reschange"
      >删除历史记录</el-button
    >
    <el-table
      :data="restaurants1"
      style="width: 100%">
      <el-table-column
        prop="projectname"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="developer"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="transactionCount"
        label="数量">
      </el-table-column>
    </el-table>
  </div>
</template>
export default {
  name: 'userManagement',
  data() {
    return {
      restaurants1:[],//接口数据
      //建议的数组,这里可以看成历史数据的数组，这个数组不能为空，为空的话就会报错
      restaurants: [
        {
          value: '', //必须项
          code: ''
        }
      ],
      state1: '',
      unmatched:false,
    }
  },
  created() {
    this.firstHouse()
  },
  mounted() {
    this.restaurants = this.loadAll() 
  },
  methods: {
  //删除历史纪录
    reschange(){
       localStorage.removeItem('srcOrderNo')  //清空缓存
       localStorage.removeItem('ReverseSort')
       this.restaurants=[]
       this.unmatched=false
    },
    
    //接口数据(接口调用已省略）
    firstHouse() {
          this.restaurants1 = res.data //你获取的接口数据
           this.restaurants1.forEach((item) => {
              var value = item.projectname
              item.value = value
            })
    },
    querySearch(queryString, cb) {
      //如果有缓存值，那就给历史搜索的数组赋值
      if(queryString.length==0){
      //如果没有值就赋值历史纪录
         if (JSON.parse(localStorage.getItem('srcOrderNo'))) {
          this.restaurants = JSON.parse(localStorage.getItem('srcOrderNo'))
        }
      }else{
     // 如果有值就赋值数据库的建议提示
        this.restaurants=this.restaurants1
      }
      var restaurants = this.restaurants
        console.log(restaurants)
      //根据输入的值与历史搜索的数组进行匹配
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants
      cb(results)
    },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
    //点击历史搜索的数据，获取到点击的数据
    handleSelect(item) {
      console.log(item)
    },
     loadAll() {
      return this.restaurants
    },
    //回车，点击事件
    setIntoStorage() {
      console.log(this.state1)
      this.firstHouse()
      if (JSON.parse(localStorage.getItem('ReverseSort'))) {
        // 判断是否有  缓存值
        var data = JSON.parse(localStorage.getItem('ReverseSort'))
        //如果已经存在输入的值，那这个值的搜索次数加一
        for (var i = 0; i < data.length; i++) {
          if (data[i].value == this.state1) {
            data[i].number = Number(data[i].number) + 1
          }
        }
        function compare(property) {
          return function(a, b) {
            var value1 = a[property]
            var value2 = b[property]
            return value1 - value2
          }
        }
        var datas = data.sort(compare('number')).reverse() //根据搜索次数进行倒排序
        localStorage.setItem('ReverseSort', JSON.stringify(datas)) //储存到所有历史数据中
        if (datas.length > 5) {
          //限制页面上只显示五条历史数据
          var list = datas.slice(0, 5)
          localStorage.setItem('srcOrderNo', JSON.stringify(list))
        } else {
          localStorage.setItem('srcOrderNo', JSON.stringify(datas))
        }
        //如果历史数据中不存在，则需要进行添加
        for (var i = 0; i < data.length; i++) {
          if (data[i].value == this.state1) {
            return
          }
        }
        //新数据
        data.push({
          value: this.state1,
          code: '1',
          number: 1
        })
        function compare(property) {
          return function(a, b) {
            var value1 = a[property]
            var value2 = b[property]
            return value1 - value2
          }
        }
        var datat = data.sort(compare('number')).reverse()
        localStorage.setItem('ReverseSort', JSON.stringify(datat))
        if (datat.length > 5) {
          var list = datat.slice(0, 5)
          localStorage.setItem('srcOrderNo', JSON.stringify(list))
        } else {
          localStorage.setItem('srcOrderNo', JSON.stringify(datat))
        }
      } else {
        // 首次创建
        let str = [{ value: this.state1, code: '0', number: 1 }]
        //创建用于存储所有的历史搜索，计算数据输入频率的高低
        localStorage.setItem('ReverseSort', JSON.stringify(str))
        //创建用于存储页面上的历史搜索，根据计算展示搜索频率最高的数据
        localStorage.setItem('srcOrderNo', JSON.stringify(str))
      }
    }
  }
}

参考@倔强的烤马铃薯的文章
效果：