微信小程序_实现输入框带搜索记录功能

wxml:

[code]  <view class="menu">
<input class='search' placeholder='输入商品名称' placeholder-class='pla' bindinput='input_txt' bindconfirm='btn_search' value='{{searchValue}}'></input>
<button class='btn' bindtap='btn_search'>搜索</button>
</view>
<view class='history' bindtap='deleteHistory' wx:if="{{showHistory}}">清除搜索历史</view>
<view class='h_con' wx:if="{{showHistory}}">
<view class='h_con1'>
<view class="title" wx:for="{{history}}" bindtap='toSearch' data-value='{{item}}' data-index="{{index}}">{{item}}</view>
</view>
</view>

js:

[code]var searchArray = []

input_txt: function(e) {//输入框输入事件
that.setData({
searchTxt: e.detail.value.trim()
})
},
btn_search: function() {//搜索确认事件
if (that.data.searchTxt == "") {
wx.showToast({
title: '商品名不为空',
image: '/images/error.png',
duration: 1000
})
return;
}
that.buildHistory(that.data.searchTxt)//调用历史记录事件
},
//建立搜索记录
buildHistory: function(e) {
if (wx.getStorageSync("history").length > 0 && wx.getStorageSync("history").length < 8) {//小于指定数量之内
let index = wx.getStorageSync("history").indexOf(e)
if (index < 0) {//数据不存在时直接追加
searchArray = wx.getStorageSync("history").concat(e)
wx.setStorageSync("history", searchArray)
} else {//数据已存在时调到头部
searchArray = wx.getStorageSync("history")
searchArray.splice(index, 1)
searchArray = searchArray.concat(e);
wx.setStorageSync("history", searchArray)
}
} else if (wx.getStorageSync("history").length >= 8) {//大于指定数量
let index1 = wx.getStorageSync("history").indexOf(e)
if (index1 > -1) {//数据已存在时掉到头部
searchArray = wx.getStorageSync("history")
searchArray.splice(index1, 1)
searchArray = searchArray.concat(e);
wx.setStorageSync("history", searchArray)
return;
}
//数据不存在时删除第一个后追加
searchArray = wx.getStorageSync("history")
searchArray.splice(0, 1)
searchArray = searchArray.concat(e);
wx.setStorageSync("history", searchArray)
} else {//无数据时候直接追加
searchArray = searchArray.concat(e)
wx.setStorageSync("history", searchArray)
}
},