微信小程序输入框历史搜索纪录

1、获取输入框的值

<input type="text" name="searchpage" bindinput='getValue' class="spage" placeholder="输入搜索内容" bindtap='search' />
//获取输入框的值
getValue(e){
var that=this;
that.setData({
search : e.detail.value//获取bindinput的值
})
}

2、点击搜索按钮将输入框的值写进缓存

<button class="btn" bindtap="goSearch">搜索</button>
//点击搜索进入搜索加入缓存记录
search(){
console.log(this.data.searchStorage)
//控制搜索历史
var self = this;
if (self.data.search != '') {
//将搜索记录更新到缓存
var searchData = self.data.searchStorage;
searchData.push({
id: searchData.length,
name: self.data.search
})
wx.setStorageSync('searchData', searchData);
self.setData({ StorageFlag: false, })
}
}

3、进来页面获取缓存，并点击输入框出现历史记录或者常在


<view class="history" wx:for="{{searchStorage}}">{{item.name}}</view>

data: { search:"", searchStorage:[], StorageFlag:false }

//打开历史记录列表 openLocationsercher: function () { this.setData({ searchStorage: wx.getStorageSync('searchData') || [], StorageFlag: true, listFlag: true, }) } /**

生命周期函数--监听页面加载 */ onLoad: function (options) { this.openLocationsercher(); }

>4、页面需要清空历史记录按钮，绑定清空函数
```js
<button bindtap='clearSearchStorage'>清空历史记录</button>
//清除历史记录
clearSearchStorage: function () {
wx.removeStorageSync('searchData')
this.setData({
  searchStorage: [],
  StorageFlag: false,
})
}

微信小程序搜索历史form表单实现

//form表单上的实现，和上面不一样的就是用form包着

1、获取表单输入值


//form表单绑定提交函数
<form class="search-page" bindsubmit='searchSubmitFn'>
<input type="text" value="{{searchValue}}" name="input" class="spage" placeholder="输入搜索内容"/>
<button class="btn" formType='submit'>搜索</button>
</form>
//点击搜索按钮提交表单跳转并储存历史记录
data: {
inputVal:'',
searchRecord: []
},
searchSubmitFn: function (e) {
var that = this
var inputVal = e.detail.value.input
var searchRecord = this.data.searchRecord
console.log(searchRecord)
if (inputVal == '') {
//输入为空时的处理
return
}
else {
//将搜索值放入历史记录中,只能放前五条
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)
}
},

>2、
```js
//打开历史记录列表
  openHistorySearch: function () {
    this.setData({
      searchRecord: wx.getStorageSync('searchRecord') || [],//若无储存则为空
    })
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.openHistorySearch()
  },

3、清除记录


<button bindtap='historyDelFn'>清空历史记录</button>

//清除历史记录 historyDelFn: function () { wx.clearStorageSync('searhRecord') this.setData({ searchRecord: [] }) },

minbaowang / SSeffects

微信小程序输入框历史搜索纪录 #7

微信小程序输入框历史搜索纪录

微信小程序搜索历史form表单实现