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

                                

wxml:

  <view class="menu">
    <input class='search' placeholder='输入商品名称' placeholder-class='pla' bindinput='input_txt' bindconfirm='btn_search' value='{{searchValue}}'></input>
    <button class='btn' bindtap='btn_search'>搜索</button>
  </view>
  <view class='history' bindtap='deleteHistory' wx:if="{{showHistory}}">清除搜索历史</view>
  <view class='h_con' wx:if="{{showHistory}}">
    <view class='h_con1'>
      <view class="title" wx:for="{{history}}" bindtap='toSearch' data-value='{{item}}' data-index="{{index}}">{{item}}</view>
    </view>
  </view>

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