小程序 搜索记录功能实现

实现样式

在JS中设置初始值

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

搜索历史

1. 获取缓存

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

2. 写入缓存

//搜索框文本内容显示
    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) {
            //没有搜索词 友情提示
            wx.showToast({
                title: '请重新输入',
                duration: 2000,
            })
        }
        else {
            //提交表单跳转并储存历史记录
            wx.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
                })
            }
        }
        //将历史记录数组整体储存到缓存中
        wx.setStorageSync('searchRecord', searchRecord)
    }

3. 清除缓存

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

html结构

<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>