Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uni-app搜索历史记录功能实现

uni-app搜索历史记录功能实现

作者头像
德顺
发布于 2020-09-30 02:37:01
发布于 2020-09-30 02:37:01
3.2K00
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

今天也是在提测的时候遇到了一些问题,用的是随商的商城系统。

H5 商品和店铺搜索的时候,有一个搜索历史记录功能。但是测试时发现历史记录中的关键词,再次搜索时不能跳转。

检查了一下代码,在触发搜索的时候,会去一下缓存中的数组,如果搜索关键词在数组中有的就直接 return 了。

于是我就改造,重写了一下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
searchStart: function () {
  let _this = this;
  if (_this.searchText == '') {//搜索关键词为空
    uni.showToast({//提示信息
      title: '请输入关键字',
      icon: 'none',
      duration: 1000
    });
  } else {
    uni.getStorage({//从缓存中取搜索历史记录的数组
      key: 'search_cache',
      success(res) {//获取成功
        let list = res.data;
        for (let i in list) {//循环遍历
          if (list[i] == _this.searchText) {//如果缓存数组中有搜索关键词
            list.splice(i, 1)//删除数组中的该关键词
          }
        }
        list.unshift(_this.searchText);//将搜索关键词添加到数组开头
        list.splice(6)//只保留6个
        _this.hList = list;
        uni.setStorage({//将新的数组存入缓存
          key: 'search_cache',
          data: _this.hList,
        });
        _this.search(_this.searchText);//搜索
      },
      fail() {//没有获取到缓存
        _this.hList = [];
        _this.hList.push(_this.searchText);
        uni.setStorage({
          key: 'search_cache',
          data: _this.hList,
        });
        _this.search(_this.searchText);//搜索
      }
    })
  }
}

这样可以在搜索的时候查一下缓存,如果有重复,就删除原数组中的该关键词,然后添加到数组的开头。

然后删除数组第6个以后的元素(保留6条搜索历史),存入缓存,跳转搜索。

这样就可以实现搜索历史记录功能了,如果有更好的方法或者建议,可以在下方评论区指出。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uni-app实现搜索跳转功能
我们在历史记录元素添加了click事件,这个事件触发历史记录函数完成历史搜索,下文展示。
切图仔
2022/09/08
2.9K0
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(下) -- 搜索历史
👋👋欢迎来到👋👋 🎩魔术之家!!🎩 该文章收录专栏 ✨-- 2022微信小程序京东商城实战 --✨ 专栏内容 ✨-- 京东商城uni-app项目搭建 --✨ ✨-- 京东商城uni-app 配置tabBar & 窗口样式 --✨ ✨-- 京东商城uni-app开发之分包配置 --✨ ✨-- 京东商城uni-app开发之轮播图 --✨ ✨-- 京东商城uni-app之分类导航区域 --✨ ✨-- 京东商城uni-app 首页楼层商品 --✨ ✨-- 京东商城uni-app
计算机魔术师
2022/08/23
7850
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(下) -- 搜索历史
uni-app移动端开发技巧总结
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、**底部的原生tabbar **等。
害恶细君
2022/11/22
3K0
uni-app实战之社区交友APP(5)搜索和发布页开发
本文先介绍了搜索页的开发,包括页面的搭建(搜索框、搜索历史和搜索结果)和搜索逻辑的优化; 再重点介绍了发布页的开发:自定义导航栏的实现,文本输入框的实现,底部操作条图标和按钮的实现,图品上传和删除的实现以及编辑保存草稿的实现。
cutercorley
2021/02/02
2.8K0
uni-app实战之社区交友APP(5)搜索和发布页开发
uni-app学习(二)
1. uni-app学习(二) 1.1. 好用css记录 一定透明度的背景色background: rgba(255,255,255,.6); 1.2. 好用的代码段 store(用户登录) export default { state: { hasLogin: false, //登陆状态 loginProvider: "", //登陆方式 如 微信 openid: null, //应用id address: {}, //收货地址
老梁
2019/09/10
1.2K0
uni-app+php+workman实现简单聊天功能之聊天模块封装
前面介绍了Laravel中Websocket基本使用(Workerman) 接下来利用uni-app+laravel+workman实现一个简单的聊天功能。 聊天功能主要涉及到以下场景
切图仔
2022/09/08
4.7K1
uni-app+php+workman实现简单聊天功能之聊天模块封装
uni-app入门教程(5)接口的基本使用
本文主要介绍uni-app提供的一些基础接口,包括:网络请求接口,用于通过指定的请求方法,携带特定的数据,向特定的地址请求并返回请求结果;图片处理接口,包括选择、预览、获取信息、保存到本地等接口;文件处理接口,包括文件上传和下载接口;数据缓存接口,包括以同步或异步的方式保存、获取或删除数据的接口。
cutercorley
2020/12/25
3K0
微信小程序 搜索历史记录缓存到本地
先说下需求,想做的效果是这样的:有个搜索框,下面是记录 搜索的关键字。由于小程序未采用登录注册,所以,搜索记录不方便保存在服务端,于是乎,前端需要记录到缓存里,然后显示出来。
田超
2018/07/11
2.3K0
uni-app+php+workman实现简单聊天功能之交互实现(会话列表)
前面介绍了【Laravel中Websocket基本使用(Workerman)】 基于workman的基础上实现了【uni-app+php+workman实现简单聊天功能之API开发】、【uni-app+php+workman实现简单聊天功能之聊天模块封装】 接下来完成前后端交互,本文只介绍主要页面和主要代码 我们涉及到的页面有主要两个
切图仔
2022/09/08
1.1K0
uni-app+php+workman实现简单聊天功能之交互实现(会话列表)
微信小程序显示用户搜索历史记录功能实现
效果是点击首页输入框跳转到搜索页面,用户搜索后将搜索的内容在历史搜索中展示 如下图所示 首页输入框布局和样式这里我就不展示了 js就是点击跳转页面 历史搜索记录模块wxml <view class="history"> <!-- 历史搜索标题 --> <view class="his_head"> <van-row> <van-col span="20"> <view class="his_title"
peng_tianyu
2022/12/15
1.9K1
微信小程序显示用户搜索历史记录功能实现
新版HBuilderX在uni_modules创建搜索search组件
打不着的大喇叭
2024/03/11
2200
新版HBuilderX在uni_modules创建搜索search组件
Chrome Extension 历史记录、下载记录和存储管理
在现代浏览器扩展开发中,如何高效地管理历史记录、优化下载体验,以及构建灵活的数据存储方案,已经成为开发者们关注的焦点。今天,我们将深入探讨 Chrome 提供的 历史浏览记录 API、下载管理 API 和 存储管理 API,并通过一个实用项目带你快速上手这些功能,让你的插件不仅智能,还贴心。
FunTester
2025/01/23
1910
Chrome Extension 历史记录、下载记录和存储管理
手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
相信你看到这篇文章的时候已经阅读了上篇文章的开发这个小程序的准备工作,如果你准备好了,那接下来让我们一起开始吧!
Tz一号
2020/09/10
9330
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
本文先介绍了搜索结果页开发,包括搜索类型的传递、占位符设置和搜索功能实现; 再介绍了帖子详情页的开发,包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。
cutercorley
2021/02/04
2.5K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
Android 垃圾分类APP(七)历史记录
  本文将是这个垃圾分类APP的暂定最后一篇,后面可能有,可能没有,就像薛定谔的猫一样。
晨曦_LLW
2021/04/25
1.3K2
Android 垃圾分类APP(七)历史记录
Android 天气APP(十五)增加城市搜索、历史搜索记录
看这篇文章之前,你是否是一路看过来的呢?如果你单独看着一篇的话,有些内容你可能看不懂,所以我建议你一篇一篇的看,这是第十五篇文章了,前面还有十四篇,建议先了解一下,传送门: 天气APP-专栏 在我思虑良久之后决定加一个城市的搜索功能,反正有现成的API,不用白不用,我白嫖侠是不放过任何一个可以白嫖的机会。
晨曦_LLW
2020/09/25
4.8K0
Edge搜索栏太方便了:历史记录、书签、标签页快速搜索!
Edge之前陆续推出了Edge Workspace、Edge垂直标签栏、Edge集锦等实用功能,可以看到Edge浏览器非常注重让用户能够有序处理自己30~50个打开的标签页,提高信息管理效率。
全网漫游指南
2024/01/31
4.2K0
Edge搜索栏太方便了:历史记录、书签、标签页快速搜索!
android 实现 搜索保存历史记录功能
这样就可以实现简单的 搜索历史匹配 我们要做的 其实就是缓存输入的内容到 本地 下面就是实现保存 搜索内容到本地 和 清空本地历史的 方法 //保存搜索内容到本地 
再见孙悟空_
2023/02/10
1.2K0
android 实现 搜索保存历史记录功能
【黄啊码】微信小程序搜索功能
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/search.html
黄啊码
2021/09/26
1.1K0
开发|走进小程序(三)
前一篇博客为大家简单的讲解了一下关于一个简单的电商小程序的首页和分类页面的制作。这篇博客呢,继续为大家讲解后面搜索页、详情页、购物车页面的制作。
算法与编程之美
2019/07/17
8970
推荐阅读
相关推荐
uni-app实现搜索跳转功能
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验