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

                                

wxml:

  
    
    搜索
  
  清除搜索历史
  
    
      {{item}}
    
  

js:

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