微信小程序实现历史搜索功能（h5同理）

1.实现效果

2.实现原理

将数据存在storage中。

wx.setStorageSync('search_history', JSON.stringify(this.data.list))

取数组前15条。

 if (wx.getStorageSync('search_history') ){this.setData({list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)})}

并将每次选择的数据移到数组的第一条。

 this.data.list.unshift(data);

清空所有历史。

clearHistory() {this.setData({list:[]})wx.removeStorageSync('search_history')},

3.微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。

4.代码

<view class="head flex-row"><view class="head_input"><image src="/img/search_icon.png" class="search_icon"></image><input type="text" placeholder="搜索" placeholder-class="place_holder" bindconfirm="getData" value="{{search}}"></input></view><view class="sha_icon" catchtap="clear_input">取消</view>
</view>
<view class="con"><view class="title">热门搜索</view><view class="flex-row list"><block wx:for="{{hot_list}}"  wx:key="index"><view class="c_item color"  data-index="{{index}}" catchtap="getSearch">{{item}}</view></block></view><view  wx:if="{{list.length>0}}"><view class="flex-row j_b"><view class="title">搜索历史</view><view catchtap="clearHistory" class="clear">清空历史</view></view><view class="flex-row list"><block wx:for="{{list}}" wx:key="index"><view class="c_item" data-index="{{index}}"  catchtap="getSearchOne">{{item}}</view></block></view></view>
</view>

/* pages/jsCase/historySearch/index.wxss */
.head {position: fixed;top: 0;left: 0;width: 100%;height: 90rpx;box-sizing: border-box;padding: 0 20rpx;background: #fff;
}
.head_input {position: relative;flex: 1;margin-left: 12rpx;
}.search_icon {position: absolute;top: 50%;left: 0;margin-top: -15rpx;width: 28rpx;height: 30rpx;padding-left: 23rpx;
}.head input {height: 60rpx;padding-left: 75rpx;font-size: 28rpx;border-radius: 30rpx;background: #F5F5F5;
}.place_holder {font-size: 28rpx;color: #999999;
}.sha_icon{margin-left: 18rpx;font-size: 28rpx;color: #333333;
}.con{padding: 130rpx 20rpx ;
}
.title{font-size: 30rpx;font-weight: 600;color: #333333;
}.c_item{font-size: 25rpx;height: 49rpx;line-height: 49rpx;padding: 0 26rpx;background: rgba(131, 183, 253,0.1);border-radius: 31rpx;justify-content: center;margin-bottom: 24rpx;margin-right: 24rpx;white-space:pre;color: #999;
}
.list{margin-top: 40rpx;flex-wrap: wrap;
}.color{color: #83B7FD;
}.clear{color: #999;font-size: 25rpx;
}

Page({/*** 页面的初始数据*/data: {hot_list:['杜甫','李白','李清照','姜子牙','万事如意，心想事成'],list:[],},onShow: function () {if (wx.getStorageSync('search_history') ){this.setData({list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)})}},getData(e){let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格if (data.trim() != '') {this.data.list.forEach((key, index) => {if (key == data) {this.data.list.splice(index, 1);}})this.data.list.unshift(data);this.setData({list:this.data.list.slice(0,15)})wx.setStorageSync('search_history', JSON.stringify(this.data.list))}},clear_input(){this.setData({search:''})},getSearch(e){let {index}=e.currentTarget.dataset,{hot_list}=this.data;let va=hot_list[index]this.setData({search:va})// 将标签存到历史搜索中this.data.list.forEach((item, index) => {if (item == va) {this.data.list.splice(index, 1);}})this.data.list.unshift(va);this.setData({list:this.data.list.slice(0,15)})wx.setStorageSync('search_history', JSON.stringify(this.data.list))},//清空历史clearHistory() {this.setData({list:[]})wx.removeStorageSync('search_history')},getSearchOne(e){let {index}=e.currentTarget.dataset,{list}=this.data;let va=list[index]this.setData({search:va})this.data.list.forEach((item, index) => {if (item == va) {this.data.list.splice(index, 1);}})this.data.list.unshift(va);this.setData({list:this.data.list.slice(0,15)})console.log(this.data.list)wx.setStorageSync('search_history', JSON.stringify(this.data.list))}
})

5.更多小程序案例（创作不易，尊重原创）

https://gitee.com/susuhhhhhh/wxmini_demo

微信小程序实现历史搜索功能（h5同理）相关推荐

微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
微信小程序实现历史搜索记录的本地储存和删除
输入框和搜索按钮表单的wxml,没啥特别的,这里绑定了输入框的输入值,样式我就不放上来了 <form class='searchForm' bindsubmit='searchSubmitFn' ...
微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的.主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中黄色的inp ...
微信小程序：历史搜索及根据关键词列表查询
searchValue 是搜索内容,searchList 是存放搜索内容的数组,通过使用 wx.setStorageSync('searchList', searchList)在本地存储一个名为sea ...
【微信小程序】历史搜索记录本地保存功能实现及思路
要求: 1.用户点击搜索之后把输入的值记录下来 2.如果最新搜索在历史记录里面有,把它从原来的位置放到第一的位置显示 3.最大10条实现思路: 首先是在用户点击'搜索'的时候开始往Storage里面 ...
微信小程序如何实现搜索功能
思路: 1.先对input框绑定个search方法进行搜索 2.在js中写sarch方法,利用wx.request查找数据,success成功之后开始查找自己要的数据. 3.根据input框的输入值且 ...
微信小程序使用键盘搜索功能
记录下. 1.name='search';//search内容随便写 2.bindconfirm='shop_search_function'://这个变量是js函数 3.confirm-type=' ...
微信小程序之历史百科软件
微信小程序之历史百科软件历史百科软件--首页说明:本软件是借鉴一个名为"全历史"的APP,这是一款超级棒的历史科普软件,也是我一直在用的一款软件,里面的涵盖面十分广泛,对历史知 ...

微信小程序实现历史搜索功能（h5同理）

1.实现效果

2.实现原理

3.微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。

4.代码

5.更多小程序案例（创作不易，尊重原创）

微信小程序实现历史搜索功能（h5同理）相关推荐

最新文章

热门文章