搜索与显示历史记录功能的实现

需求

完成一次搜索记录一次搜索，以后进入搜索页面会显示搜索历史，点击删除小图标会清空所有缓存

分割功能需求

主要分割为这几个步骤：

进入搜索后判断缓存中是否有值，如果没有缓存，隐藏历史记录跟小图标，如果有缓存，加载缓存，将缓存的内容加载进预先制作的显示容器中，并且在上方显示历史记录跟小图标；

输入值后，点击完成，判断是否有搜索结果，如果有，保存搜索记录，放进缓存，并且显示搜索结果，此时需要隐藏历史记录的container,隐藏完成按钮，上方的搜索框的长度变长，显示结果的container,并且input框中的值为不变，保存在input框中，没有就返回空

删除缓存

第一步

实现：

onLoad: function (options) {

const inputValue = options.inputValue;

if (wx.getStorageSync('searchData') == '') {

this.setData({

isHide: true,

isCover: true,

})

} else {

this.setData({

inputValue: inputValue,

confirm: '完成',

sercherStorage: wx.getStorageSync('searchData') || [],

isHide: false,

isShow: true

})

}

},

效果：

第二步

实现：

changeValue(e) {

let inputValue = e.detail.value;

if (inputValue == '') {

this.setData({

confirm: '取消',

isConfirm: false,

isHide:false, //显示历史记录container

width: '85%',

isShow: true, //显示图标以及标签栏

isCover:true //隐藏搜索结果的container

})

} else {

this.setData({

confirm: '完成',

inputValue: inputValue

})

}

},//监听输入

confirmValue(e) {

let value = this.data.inputValue;//获取输入值

if (this.data.confirm === '完成') {

let result = [];

for (let i in jobList) {

if (jobList[i].jobName.indexOf(value) >= 0){

result.push(jobList[i]);

this.setData({

result

})

}

if(this.data.result.length == 0) {

wx.showToast({

title: '未找到数据',

});

this.setData({

isConfirm: false,

isHide: false

})

}

}//搜索数据匹配

// 第二种搜索方法 正则匹配

// let result=[];

// let reg=new RegExp(value);

// for(var i=0;i

// if(jobList[i].jobName.match(reg)){

// result.push(jobList[i]);

// this.setData({

// result

// })

// }

// }

let searchData = this.data.sercherStorage;

searchData.push({

id: searchData.length,

name: value

})

wx.setStorageSync('searchData', searchData); //设置缓存

this.setData({

isConfirm: true, //隐藏搜索按钮

width: '95%',

inputValue: value,

isHide: true, //隐藏历史记录container

isShow: false, //隐藏图标以及标签栏

isCover: false //显示搜索结果

})

} else {

wx.navigateBack({

delta: 1, // 回退前 delta(默认为1) 页面

})

}//点击取消回到上个页面

},

效果：

第三步

clearStorage(e) {

wx.clearStorageSync('searchData');//清除缓存

wx.showModal({

title: '提示',

content: '确定删除全部历史记录？',

success: (res) => {

if (res.confirm) {

this.setData({

sercherStorage: [],

isShow: false

})

} else if (res.cancel) {

return false;

}

}

})

},

完整代码

wxml:

{{confirm}}

历史搜索

{{item.name}}

wxss:

page {

margin: 0;

padding: 0;

}

.searchContainer {

position: relative;

width: 100%;

height: 100rpx;

border-bottom: 8rpx solid #fbfbfb;

margin-left: 20rpx;

}

.search {

position: relative;

margin-top: 20rpx;

width: 85%;

height: 60rpx;

border: 3rpx solid #e8e8e8;

border-radius: 80rpx 80rpx 80rpx 80rpx;

float: left;

}

.searchInput {

position: absolute;

left: 65rpx;

top: 5rpx;

font-size: 15px;

color: #323230;

}

.searchImg {

position: absolute;

left: 26rpx;

top: 12rpx;

width: 35rpx;

height: 35rpx;

}

.cancleSearch {

position: absolute;

right: 0;

width: 126rpx;

height: 100rpx;

line-height: 100rpx;

text-align: center;

font-size: 15px;

color: #323232;

}

.hide {

display: none;

}

.history {

float: left;

position: relative;

height: 100%;

width: 100%;

}

.history-header {

float: left;

position: relative;

height: 110rpx;

width: 100%;

}

.title {

position: absolute;

font-size: 13px;

color: #313131;

left: 7rpx;

top: 38rpx;

}

.delectHistory {

position: absolute;

width: 30rpx;

height: 30rpx;

top: 43rpx;

right: 57rpx;

}

.history-content {

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: space-around;

flex-wrap: wrap;

margin-right: 50rpx;

height: 100%;

width: 650rpx;

}

.content {

font-size: 13px;

max-width: 400rpx; //缓存显示最大宽度

margin-top: 20rpx;

padding-left: 15rpx;

padding-right: 15rpx;

height: 50rpx;

line-height: 50rpx;

color: #757575;

text-align: center;

border-radius: 50rpx;

background-color: #f8f9fb;

overflow: hidden;

text-overflow: ellipsis; //文本超出400rpx的后面的内容用省略号代替

white-space: nowrap;

letter-spacing: 1px;

}

最后