vue+elementUI实现搜索框历史记录

            <el-autocomplete
              v-model="smallcx.appid"
              placeholder="appid"
              :fetch-suggestions="querySearch" //重点!!!!!
              style="margin-bottom: 10px"
            />
data(){
  return{
       noRoNameHistory: []  //定义一个存放历史搜索记录的数组
   }
}
querySearch(queryString, cb) {
          // 调用 callback 返回建议列表的数据
          const noRoNameHistory = JSON.parse(localStorage.getItem('array'))
          const results = queryString ? noRoNameHistory.filter(this.createFilter(queryString)) : noRoNameHistory
          cb(results)
      },
createFilter(queryString) {
          return (noRoNameHistory) => {
              return (noRoNameHistory.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
          }
      },
**这段代码根据我们的需求,我是放在请求后的。**
          const noArr = []; // 历史记录数组
          //value是必须的,type最好也加上,我不加出了异常。这里value的值就是记录,根据自己需求保存
          const value = this.smallcx.appid;
          const cnoOrName = "coOrName";
          noArr.push({ value: value, type: cnoOrName });
          if (JSON.parse(localStorage.getItem("array"))) {
            // 判断是否已有xxx查询记录的localStorage
            if (localStorage.getItem("array").indexOf(value) > -1) {
              // 判断是否已有此条查询记录,若已存在,则不需再存储
              return;
            }
            if (JSON.parse(localStorage.getItem("array")).length >= 10) {
              let arr = JSON.parse(localStorage.getItem("array"));
              arr.pop();
              //pop移除最后一个数组元素
              localStorage.setItem("array", JSON.stringify(arr));
            }
            //concat合并数组的值:
            localStorage.setItem(
              "array",
              JSON.stringify(
                noArr.concat(JSON.parse(localStorage.getItem("array")))
              )
            );
          } else {
            // 首次创建
            localStorage.setItem("array", JSON.stringify(noArr));
          }```

posted @   喜欢Tb  阅读(192)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了

阅读目录(Content)

此页目录为空

点击右上角即可分享
微信分享提示