Wechat applet realizes history search function (H5 similarly)

Time:2021-12-14

1. Achieve results

Wechat applet realizes history search function (H5 similarly)

2. Implementation principle

Store data in storage.

wx.setStorageSync('search_history', JSON.stringify(this.data.list))

Take the first 15 items of the array.

 if (wx.getStorageSync('search_history') ){
     this.setData({
       list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)
     })
   }

And move the data selected each time to the first item of the array.

 this.data.list.unshift(data);

Clear all history.

clearHistory() {
   this.setData({
     list:[]
   })
   wx.removeStorageSync('search_history')
 },

3. The data stored in the wechat applet will not expire unless triggered manually by the user. Similarly, if you want to implement it in the browser, you only need to store the data in localstorage.

4. Code

<view class="head flex-row">
  <view class="head_input">
    <image class="search_icon"></image>
    < input type = "text" placeholder = "search" placeholder class = "place_holder" bindconfirm = "GetData" value = "{search}" > < / input >
  </view>
  < view class = "sha_icon" catchtap = "clear_input" > cancel < / View >
</view>
<view class="con">
  < view class = "title" > popular search < / View >
  <view class="flex-row list">
    <block wx:for="{{hot_list}}"  wx:key="index">
      <view class="c_item color"  data-index="{{index}}" catchtap="getSearch">{{item}}</view>
    </block>
  </view>

  <view  wx:if="{{list.length>0}}">
    <view class="flex-row j_b">
      < view class = "title" > search history < / View >
      < view catchtap = "clearhistory" class = "clear" > clear history < / View >
    </view>
  
    <view class="flex-row list">
      <block wx:for="{{list}}" wx:key="index">
        <view class="c_item" data-index="{{index}}"  catchtap="getSearchOne">{{item}}</view>
      </block>
    </view>
  </view>
</view>
/* pages/jsCase/historySearch/index.wxss */
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: #fff;
}
.head_input {
  position: relative;
  flex: 1;
  margin-left: 12rpx;
}

.search_icon {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15rpx;
  width: 28rpx;
  height: 30rpx;
  padding-left: 23rpx;
}

.head input {
  height: 60rpx;
  padding-left: 75rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  background: #F5F5F5;
}

.place_holder {
  font-size: 28rpx;
  color: #999999;
}

.sha_icon{
  margin-left: 18rpx;
  font-size: 28rpx;
  color: #333333;
}

.con{
  padding: 130rpx 20rpx ;
}
.title{
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
}

.c_item{
  font-size: 25rpx;
  height: 49rpx;
  line-height: 49rpx;
  padding: 0 26rpx;
  background: rgba(131, 183, 253,0.1);
  border-radius: 31rpx;
  justify-content: center;
  margin-bottom: 24rpx;
  margin-right: 24rpx;
  white-space:pre;
  color: #999;
}
.list{
  margin-top: 40rpx;
  flex-wrap: wrap;
}

.color{
  color: #83B7FD;
}

.clear{
  color: #999;
  font-size: 25rpx;
}
Page({

  /**
   *Initial data of the page
   */
  data: {
    hot_ List: ['Du Fu', 'Li Bai', 'Li Qingzhao', 'Jiang Ziya', 'everything goes well and everything comes true'],
    list:[],
  },

 
  onShow: function () {
    if (wx.getStorageSync('search_history') ){
      this.setData({
        list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)
      })
    }
  },
  getData(e){
    let data = e.detail. value. replace(/(^\s*)|(\s*$)/g, "");// Remove the spaces before and after
      if (data.trim() != '') {
        this.data.list.forEach((key, index) => {
          if (key == data) {
            this.data.list.splice(index, 1);
          }
        })
        this.data.list.unshift(data);
        this.setData({
          list:this.data.list.slice(0,15)
        })
        wx.setStorageSync('search_history', JSON.stringify(this.data.list))
      }
  },
  clear_input(){
    this.setData({
      search:''
    })
  },

  getSearch(e){
    let {index}=e.currentTarget.dataset,{hot_list}=this.data;
    let va=hot_list[index]
    this.setData({
      search:va
    })
    //Save labels to historical search
    this.data.list.forEach((item, index) => {
      if (item == va) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(va);
    this.setData({
      list:this.data.list.slice(0,15)
    })
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  },
   //Clear history
   clearHistory() {
    this.setData({
      list:[]
    })
    wx.removeStorageSync('search_history')
  },
  getSearchOne(e){
    let {index}=e.currentTarget.dataset,{list}=this.data;
    let va=list[index]
    this.setData({
      search:va
    })
    this.data.list.forEach((item, index) => {
      if (item == va) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(va);
    this.setData({
      list:this.data.list.slice(0,15)
    })
    console.log(this.data.list)
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  }
})

5. More small program cases (creation is not easy, respect originality)

https://gitee.com/susuhhhhhh/wxmini_demo