<view class="search-left">
<view class="search-icon"></view>
<input
class="search-input"
bindinput="bindKeyInput"
bindconfirm="OnSearch"
type="text"
value="{{content}}"
placeholder="输入内容或关键词"
/>
<block wx:if="{{isInputText}}">
<view class="search-close" catchtap="inputClose">
<text>x</text>
</view>
</block>
</view>
<view class="search-right" bindtap="OnSearch">
<text>搜索</text>
</view>
点击搜索逻辑功能首先获取搜索的记录数组,搜索历史需要展示几个,对于重复的搜索字段不再存储
OnSearch() {
let searchRecord = o.data.searchRecord //获取搜索存储的数据
let content = this.data.content; //input的value值
if (content != '') {
if (searchRecord.length <= 5) {
// 判断数组中是否已存在
var newArr = searchRecord.findIndex (item =>{
return item.title === this.data.content;
});
if (newArr != -1) {
// 删除已存在后重新插入至数组
searchRecord.splice(newArr, 1)
searchRecord.unshift({ title:e })
} else {
searchRecord.unshift({ title:e })
}
} else if (searchRecord.length == 0){
searchRecord.unshift({ title:e })
} else {
console.log(searchRecord,'searchRecordsearchRecord')
searchRecord.pop()//删掉旧的时间最早的第一条
searchRecord.unshift({ title:e })
}
wx.setStorageSync('historyList', searchRecord)
o.getHistorySearch()
} else {
wx.showModal({
title: "提示",
content: "请输入要搜索的关键词"
});
}
}
获取存储的历史记录,在onLoad生命周期调用
getHistorySearch() {
this.setData({
searchRecord: wx.getStorageSync('historyList') || [] //若无存储则为空
})
},
清除历史记录
hisDel(){
wx.clearStorageSync('historyList')
this.setData({
searchRecord: []
})
},
点击搜索的字段,再次搜索,获取点击的是哪个字段,传递过去,重新调用
OnSearch
方法
historyClick(e){
let name = e.currentTarget.dataset.item.title
if (name) {
this.setData({
content:name
})
this.OnSearch()
}
},