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));
          }```

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值