小程序搜索页面,实现搜索记录清除,点击热门搜索词能输入到搜索框,显示搜索记录
wxml页面
<view class='ctn'>
<icon type='search'></icon>
<input value='{{input_value}}' bindinput='inputValue' focus='{{name_focus}}'></input>
<text class='cancel' bindtap='searchTap'>{{search}}</text>
</view>
<!-- 热门搜索盒子 -->
<view class='hotBox'>
<text class='hotSearch'>热门搜索</text>
<!-- 搜索词盒子 -->
<view class='wid100'>
<!-- 热门搜索词 -->
<button wx:for='{{hotKeywords}}' wx:key="{{index}}" data-text="{{item}}" bindtap='this_value'>{{item}}</button>
</view>
</view>
<!-- 搜索记录盒子 -->
<view class='hisBox'>
<text class='historySearch'>最近搜索</text>
<image src='../imgs/delete.png' class='delete' bindtap='deleteTap'></image>
<!-- 最近搜索词盒子 -->
<view class='hist-box' >
<view class='list' wx:for="{{history}}" wx:key="{{history.index}}">
<image src='../imgs/time.png' style='width:15px;height:15px;margin:4rpx 10rpx 0 20rpx;' class='time'></image>
<!-- 最近搜索词 -->
<text bindtap='this_value' data-text="{{item}}" >
{{item}}</text>
</view>
</view>
</view>
wxss页面
page{
height: 100%;
background-color: #F5F5F5;
}
.ctn{
background-color: #F0EFF5;
height: 88rpx;
}
.ctn input{
height: 58rpx;
background-color: #fff;
width: 566rpx;
border-radius: 10rpx;
margin: 16rpx;
padding-left: 70rpx;
font-size: 29rpx;
}
.cancel{
font-size: 32rpx;
position: absolute;
right: 18rpx;
top: 20rpx;
color: #6F6F6E;
}
.ctn icon{
position: absolute;
top: 23rpx;
left: 36rpx;
}
.hotSearch{
font-size: 29rpx;
margin: 20rpx;
color: #BCBCBC;
}
.wid100{
margin-top:20rpx;
width: 100%;
overflow: hidden;
padding-bottom:10px;
}
.hisBox .delete{
width: 27rpx;
height: 27rpx;
margin: -40rpx 40rpx 0 0;
vertical-align: middle;
float: right;
}
.hist-box{
height: 50rpx;
overflow: hidden;
}
.hist-box .list{
position: relative;
}
.hist-box .list text{
font-size: 29rpx;
display: inline-table;
position: absolute;
top:-32rpx;
left:60rpx;
}
.wid100 button{
height: 64rpx;
text-align: center;
line-height: 64rpx;
display: inline-table;
font-size: 29rpx;
background-color: #fff;
margin:10rpx 20rpx;
}
.historySearch{
font-size: 29rpx;
margin: 20rpx;
color: #BCBCBC;
display: block;
}
.hisCont{
display: block;
}
.hisCont text{
position: absolute;
top:445rpx;
left:62rpx;
font-size: 29rpx;
}
js页面
const app =getApp();
Page({
/**
* 页面的初始数据
*/
data: {
hotKeywords: [],
history:[],
name_focus:true,
search:'搜索',
input_value:'', //value值
inpuVal: "",//input框内值
keydown_number: 0
//检测input框内是否有值
},
inputValue: function (e) {
this.setData({
inpuVal: e.detail.value
})
if (e.detail.cursor != 0) {
this.setData({
search: '搜索',
keydown_number: 1
})
} else {
this.setData({
search: '取消',
keydown_number: 0
})
}
},
searchTap: function () {
if (this.data.keydown_number == 1) {
let _this = this;
let arr = this.data.history;
//判断是手动输入的还是点击赋值
if (this.data.input_value == "") {
//判断是否已经存在
let arrnum = arr.indexOf(this.data.inpuVal);
if (arrnum != -1) {
//删除已存在后重新插入至数组
arr.splice(arrnum, 1)
arr.unshift(this.data.inpuVal);
} else {
arr.unshift(this.data.inpuVal);
}
} else {
let arr_num = arr.indexOf(this.data.input_value);
if (arr_num != -1) {
arr.splice(arr_num, 1)
arr.unshift(this.data.input_value);
} else {
arr.unshift(this.data.input_value);
}
}
//存储搜索记录
wx.setStorage({
key: 'history_arr',
data: arr,
})
//取出搜索记录
wx.getStorage({
key: 'history_arr',
success: function (res) {
_this.setData({
history: res.data
})
},
})
this.setData({
input_value: '',
})
} else {
console.log("取消")
}
},
//清除最近搜索
deleteTap:function(){
this.setData({
history:[]
});
//清空缓存
wx.removeStorage({
key: 'history_arr',
})
},
//点击热门词出现在输入框里
this_value:function(e){
this.setData({
name_focus:true
})
let value =e.currentTarget.dataset.text;
this.setData({
input_value:value,
search:"搜索",
keydown_number:1
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let _this =this;
wx.getStorage({
key: 'history_arr',
success: function(res) {
_this.setData({
history:res.data
})
},
}),
wx.request({
url: 'https://www.easy-mock.com/mock/5ca45b48dd01db46f481d8a2/hot/words',
data:{},
method:"GET",
success:function(res){
_this.setData({
hotKeywords:res.data.data.words
})
}
})
},