百度小程序 搜索记录功能实现

实现样式

在JS中设置初始值

data: {
inputVal: '',
searchRecord: []
},

搜索历史

1. 获取缓存

openHistorySearch: function () {
this.setData({
searchRecord: swan.getStorageSync('searchRecord') || [], //若无储存则为空
})
},
onLoad: function (opstion) {
this.openHistorySearch();
}

1. 写入缓存

//搜索框文本内容显示
inputBind: function (event) {
this.setData({
inputValue: event.detail.value
})
// console.log('输入' + this.data.inputValue)
var app = getApp();
//设置全局的请求访问传递的参数
app.requestName = event.detail.value;
},
query: function (e) {
var that = this
if (!that.data.inputValue) {
//没有搜索词 友情提示
swan.showToast({
title: '请重新输入',
duration: 2000,
})
}
else {
//提交表单跳转并储存历史记录
swan.navigateTo({
url: '/pages/search/search',
})

var that = this
var inputVal = getApp().requestName
var searchRecord = this.data.searchRecord
//将搜索值放入历史记录中,只能放前五条
if (searchRecord.length < 5) {
searchRecord.unshift({
value: inputVal,
id: searchRecord.length
})
} else {
searchRecord.pop() //删掉旧的时间最早的第一条
searchRecord.unshift({
value: inputVal,
id: searchRecord.length
})
}
}
//将历史记录数组整体储存到缓存中
swan.setStorageSync('searchRecord', searchRecord)
}

1. 清除缓存

historyDel: function () {
swan.clearStorageSync('searhRecord')
this.setData({
searchRecord: []
})
}

swan结构

<view class="container">
<!-- 搜索框 -->
<view class="ss">
<view class="ssl" bindtap="jiaodian">
<image class="cha1" src="/images/fangdajing.png"></image>
<input class="ssk" value="{{inputVal}}" bindinput='inputBind' bindconfirm='query' confirm-type="search" maxlength="8" placeholder="输入律师名字"/>
<image src="/images/delete.png" catchtap='chaguan' hidden="{{hideo}}" class="cha"></image>
</view>
<text hidden="{{hideo}}" bindtap="quxiao">取消</text>
</view>

<view class="tj">
<view class="tjlist">
<view s-if="{{lvnull}}">
<!-- 搜索结果的样式 -->
</view>
<view s-else class="tjnull">未查找到此律师</view>
</view>
</view>
</view>
<!-- 搜索历史 -->
<!-- 点击垃圾桶或“清除历史记录”可删除历史纪录和本地缓存 -->
<view hidden="{{hideo}}" class="yinv">
<view class="lishi">
搜索历史
<image bindtap='historyDelFn' src="/images/delete2.png"></image>
</view>
<view class="lishimenu">
<text class="lsbut" s-for="p ,index in searchRecord">{{p.value}}</text>
</view>

<view bindtap='historyDelFn'>
<view class="history_span">清除历史记录</view>
</view>

</view>