微信小程序带搜索记录的输入框 -- localStorage

在最近的项目里有一个需求,就是需要一个带搜索记录的输入框,但是不需要用到后台,就想到了使用本地缓存setStorageSync。

总结一下需要注意的点:

1、按搜索时间倒序。

unshift:在数组前面插入数据,并改变数组。

2、搜索内容前后添加了空格的时候。

string.trim();//去掉前后空格

3、最多缓存多少条搜索记录。

// 如果超过8条搜索记录的话,删掉最旧的一条
if (searchData.length >= 8)searchData.pop();
//pop:删除数组最后一个元素。

4、输入了搜索记录已经有了的内容。

//先删除搜索记录里面的,再添加元素到第一位
// 如果搜索记录里面有重复的,要做删除操作
for (let i = 0; i < searchData.length; i++) {
  if (searchData[i] == this.data.inputValue.trim()){
    searchData.splice(i,1);
    break;
  }
}
 // 添加搜索记录
 searchData.unshift(inputValue.trim());

github地址:https://github.com/chenweihuan/searchHaveHistory

只上传了关键代码,如有bug请查看修改一下,问题应该不大。

原文地址:https://www.cnblogs.com/weihuan/p/8521549.html

时间: 2024-10-09 07:01:30

微信小程序带搜索记录的输入框 -- localStorage的相关文章

微信小程序 —搜索框

wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

微信小程序搜索排名怎么优化

微信小程序搜索排名怎么优化?小程序的发展,让众多在PC互联网时代转型受阻的企业看到了希望.大家都想利用小程序来发展线上渠道,但是小程序是如何进行搜索排名的呢?可能大家都不太了解,现在小程序开发公司多享科技为大家讲述一下. 1.小程序排名的名字(标题) 不少对网站排名seo有一定了解的都应该知道,网页排名中国有一个很重要的因素就是网页标题怎么书写.同理,小出现排名中标题的书写同样很重要.并且小程序标题在同一个平台(微信.支付宝)中具有唯一性,先注册先得哦. 2.小程序的关键词 小程序关键词设置需要

微信小程序bug记录与解决

微信小程序bug记录 textarea textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工具上的,第二张图是在IOS真机上的.从上图可以看出来,在开发工具上显示很正常,而且没有padding,可是在真机上左上角就出现了padding,并且无论你在外部对textarea的padding做任何处理,都无法覆盖. 目前有一种解决方式是根据ios和android的不同平台来给teaxarea设置

微信小程序--搜索关键词高亮

代码地址如下:http://www.demodashi.com/demo/14249.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现搜索关键词高亮 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view class="container"

如何让精准用户知道我们的小程序?微信小程序带给门店商家什么?

在4月的腾讯"互联网+"数字峰会上,微信透露了一个数据:能够切实解决用户痛点的小程序七日留存接近30%.而这类微信小程序基本都已经让用户完成了品牌认知,用户会从微信任务栏或者历史列表中主动找到它们,然后重复使用. 小程序是"无需下载.随时可用,用完即走"的一款应用工具.简单的说,在小程序里面可以搜索无数个应用程序,而且里面的程序不占内存,真正实现"触手可及"的梦想. 小程序带给商家什么? 1,餐饮业:从"确认点餐-收银-配餐"

微信小程序开发 记录

采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因,最后提供正确的实例.  错误现象是,项目的app.json使用以下代码,却没有如期望那样在屏幕底部出现TabBar. { "pages":[ "pages/clickDemo/clickDemo", "pages/logs/logs", "

微信小程序学习记录(一)

如何定义一个全局变量: 1,在根目录下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_currentMusicPostId :null, doubanbase:"https://api.douban.com", self_reduction:"自减" } }) 2,在js中访问我们的全局变量 var app = getApp(); //全局的 getApp() 函数可以用来获取到小程序实例. onL

微信小程序搜索框代码组件

search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="search" bindconfirm=&

微信小程序 错误记录

1.报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function 在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时就会报错,这时要在函数一开时的地方使用var that =