微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能 热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多
wxml页面
<view class="search-header"><view class="search-wrap"><image src="../../images/icon_sous2.png" class="search-icon" bindtap="searchFn"></image><input bindinput="searchText" value="{{searchValue}}" class="search-input-text" placeholder="水蜜桃" bindconfirm="searchFn" /><view><image src="../../images/cancel.png" hidden="{{searchValue.length<1}}" class="search-img" bindinput='watchinput' bindtap="clickdel"></image></view></view><view class="search-text" bindtap="searchFn">搜索</view></view><view class="search-keywords" hidden="{{historyKeyWordsDatas.length<1}}"><view class="title"><text>最近搜索</text><text bindtap="clearHistory">清除</text></view><view class="search-content"><block><view class="search-item" wx:for="{{historyKeyWordsDatas}}" wx:key="index" data-text="{{item}}" bindtap="onClickHistoryItem">{{item.keywords}}</view></block></view></view><view class="search-keywords"><view class="title"><text>热门搜索</text></view><view class="search-content" bindtap="Hotsearch"><view class="search-item">水蜜桃</view><view class="search-item">车厘子</view><view class="search-item">香蕉</view><view class="search-item">青菜</view><view class="search-item">西葫芦</view></view></view>
css页面
/* pages/search/search.wxss */@import "../../assets/fonts/iconfont.wxss";.search-header {display: flex;height: 88rpx;width: 100%;justify-content: space-between;}.search-header .search-wrap {margin: 0px 30rpx;width: 600rpx;height: 88rpx;background: #fff;position: relative;}.search-header .search-wrap .search-icon {position: absolute;width: 29rpx;height: 29rpx;top: 28rpx;left: 25rpx;z-index: 999;}.search-img{position: absolute;width: 50rpx;height: 50rpx;right: 10rpx;top: 20rpx;}.search-header .search-wrap .search-input-text {border: 1px solid #efefef;height: 60rpx;border-radius: 30rpx;position: absolute;top: 7px;width: 100%;box-sizing: border-box;text-align: center;background-color: #F5F5F5;padding-left: 30px;padding-right: 30px;font-size: 26rpx;}.search-text{width: 60rpx;height: 30rpx;font-size: 30rpx;color: #2F2F2F;text-align: center;line-height: 30rpx;margin-top: 30rpx;margin-right: 20rpx;}.search-keywords {width: 94%;padding: 3%;overflow: hidden;}.search-keywords .title {font-size: 28rpx;color: #2F2F2F;display: flex;justify-content: space-between;}.search-content {width: 100%;display: flex;justify-content: flex-start;flex-wrap: wrap;margin-top: 20rpx;font-size: 26rpx;color: #8D8D8D;}.search-content .search-item {margin: 1%;padding: 6rpx 30rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #efefef;border-radius: 10rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
js页面
Page({/*** 页面的初始数据*/data: {historyKeyWordsDatas: [],searchValue: "",detailDatas: {},seachList: [],noData: 'false',},searchText(e) {this.setData({searchValue: e.detail.value})},//点击搜索按钮 开始搜索searchFn(e) {var keywords = this.data.searchValueconsole.log(keywords)if (keywords == '') {wx.showToast({title: '请输入搜索内容',icon: 'none'})} else {var _this = thisvar historyKeyWordsDatas = wx.getStorageSync('KW') || []for (var i = 0; i < historyKeyWordsDatas.length; i++) {//遍历数组 如果两次搜索的值重复了就只添加一条 if (historyKeyWordsDatas[i].keywords == keywords) {historyKeyWordsDatas.splice(i, 1)}}if (historyKeyWordsDatas.length < 10) {historyKeyWordsDatas.unshift({keywords: keywords,cid: historyKeyWordsDatas.length});} else if (historyKeyWordsDatas.length >= 10) {historyKeyWordsDatas.pop();historyKeyWordsDatas.unshift({keywords: keywords,cid: historyKeyWordsDatas.length});};wx.setStorageSync('KW', historyKeyWordsDatas)_this.setData({historyKeyWordsDatas: wx.getStorageSync('KW'),searchValue: "",})wx.navigateTo({url: '../search-results/search-results?keywords=' + keywords,})}},//清空输入框内容clickdel: function (e) {this.setData({searchValue: "",})},// 点击搜索历史 实现搜索onClickHistoryItem: function (e) {console.log(e);var keywords = e.currentTarget.dataset.text.keywordswx.navigateTo({url: '../search-results/search-results?keywords=' + keywords,})},//清除搜索历史clearHistory() {var _this = thiswx: wx.showModal({title: "温馨提示！",content: "确定要删除搜索记录吗？",success: function (res) {if (res.confirm) {console.log("确认");_this.setData({historyKeyWordsDatas: []})wx: wx.removeStorage({key: "KW",suceess: function () {wx.setStorageSync("KW", [])}})}}})this.onLoad()},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var kWDatas = wx.getStorageSync('KW')this.setData({historyKeyWordsDatas: kWDatas,searchValue: "",})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
缓存里数据内容
