小程序实现搜索历史记录，去重搜索字段以及限制展示字段数量

• 使用微信小程序实现搜索历史记录，去重搜索字段，限制字段数量以及点击重新搜索功能。
• 

对应界面

  <view class="search-left">
      <view class="search-icon"></view>
      <input 
          class="search-input" 
          bindinput="bindKeyInput" 
          bindconfirm="OnSearch" 
          type="text" 
          value="{{content}}"
          placeholder="输入内容或关键词"
        />
        <block wx:if="{{isInputText}}">
          <view class="search-close" catchtap="inputClose">
              <text>x</text>
          </view>
        </block>
      
  </view>
  <view class="search-right" bindtap="OnSearch">
      <text>搜索</text>
  </view>

点击搜索逻辑功能首先获取搜索的记录数组，搜索历史需要展示几个，对于重复的搜索字段不再存储

OnSearch() {
  let searchRecord = o.data.searchRecord //获取搜索存储的数据
  let content = this.data.content; //input的value值
  if (content != '') {
    if (searchRecord.length <= 5) {
      // 判断数组中是否已存在
      var newArr = searchRecord.findIndex (item =>{
          return item.title === this.data.content;
      });
      if (newArr != -1) {
          // 删除已存在后重新插入至数组
          searchRecord.splice(newArr, 1)
          searchRecord.unshift({ title:e })
      } else {
          searchRecord.unshift({ title:e })
        }
    }  else if (searchRecord.length == 0){
        searchRecord.unshift({ title:e })
    } else {
        console.log(searchRecord,'searchRecordsearchRecord')
        searchRecord.pop()//删掉旧的时间最早的第一条
        searchRecord.unshift({ title:e })
    }

    wx.setStorageSync('historyList', searchRecord)
    o.getHistorySearch() 
  } else {
    wx.showModal({
        title: "提示",
        content: "请输入要搜索的关键词"
    });
  }
  
}

获取存储的历史记录,在onLoad生命周期调用

  getHistorySearch() {
      this.setData({
        searchRecord: wx.getStorageSync('historyList') || [] //若无存储则为空
      })
  },

清除历史记录

  hisDel(){
        wx.clearStorageSync('historyList')
        this.setData({
            searchRecord: []
        })
    },

点击搜索的字段，再次搜索,获取点击的是哪个字段，传递过去，重新调用OnSearch方法

  historyClick(e){
        let name = e.currentTarget.dataset.item.title
        if (name) {
            this.setData({
                content:name
            })
            this.OnSearch()
        }
    },

• 微信扫码搜索工程狮小周。点击技术交流，带你进入微信交流群，一起学习交流前端知识.