小程序搜索页面,实现搜索记录清除,点击热门搜索词能输入到搜索框,显示搜索记录

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
         })
       }
       
     })
    
  },