搜索与显示历史记录功能的实现

需求

完成一次搜索记录一次搜索，以后进入搜索页面会显示搜索历史，点击删除小图标会清空所有缓存

分割功能需求

主要分割为这几个步骤：

1. 进入搜索后判断缓存中是否有值，如果没有缓存，隐藏历史记录跟小图标，如果有缓存，加载缓存，将缓存的内容加载进预先制作的显示容器中，并且在上方显示历史记录跟小图标；
2. 输入值后，点击完成，判断是否有搜索结果，如果有，保存搜索记录，放进缓存，并且显示搜索结果，此时需要隐藏历史记录的container,隐藏完成按钮，上方的搜索框的长度变长，显示结果的container,并且input框中的值为不变，保存在input框中，没有就返回空
3. 删除缓存

第一步

实现：

onLoad: function (options) {    const inputValue = options.inputValue;    if (wx.getStorageSync('searchData') == '') {      this.setData({        isHide: true,        isCover: true,      })    } else {      this.setData({        inputValue: inputValue,        confirm: '完成',        sercherStorage: wx.getStorageSync('searchData') || [],        isHide: false,        isShow: true      })    }    },

效果：

第二步

实现：

changeValue(e) {    let inputValue = e.detail.value;    if (inputValue == '') {      this.setData({        confirm: '取消',        isConfirm: false,        isHide:false, //显示历史记录container        width: '85%',        isShow: true,  //显示图标以及标签栏          isCover:true //隐藏搜索结果的container      })    } else {      this.setData({        confirm: '完成',        inputValue: inputValue      })    }  },//监听输入  confirmValue(e) {    let value = this.data.inputValue;//获取输入值    if (this.data.confirm === '完成') {      let result = [];      for (let i in jobList) {        if (jobList[i].jobName.indexOf(value) >= 0){          result.push(jobList[i]);          this.setData({            result          })        }        if(this.data.result.length == 0) {                wx.showToast({            title: '未找到数据',          });          this.setData({            isConfirm: false,            isHide: false          })        }      }//搜索数据匹配               // 第二种搜索方法 正则匹配      // let result=[];      // let reg=new RegExp(value);      // for(var i=0;i

效果：

第三步

clearStorage(e) {    wx.clearStorageSync('searchData');//清除缓存    wx.showModal({      title: '提示',      content: '确定删除全部历史记录？',      success: (res) => {        if (res.confirm) {          this.setData({            sercherStorage: [],            isShow: false          })        } else if (res.cancel) {          return false;        }      }    })  },

完整代码

wxml:

    
        
             
              
          
     
         
     
      {
   {confirm}}
         
             
                  
       
        历史搜索
                   
               
              
                  
                       
        
         {
   {item.name}}
                    
               
          
         
         
              
           
          
          
     
    

wxss:

page {    margin: 0;    padding: 0;}.searchContainer {    position: relative;    width: 100%;    height: 100rpx;    border-bottom: 8rpx solid #fbfbfb;    margin-left: 20rpx;}.search {    position: relative;    margin-top: 20rpx;    width: 85%;    height: 60rpx;    border: 3rpx solid #e8e8e8;    border-radius: 80rpx 80rpx 80rpx 80rpx;    float: left;}.searchInput {    position: absolute;    left: 65rpx;    top: 5rpx;    font-size: 15px;    color: #323230;}.searchImg {    position: absolute;    left: 26rpx;    top: 12rpx;    width: 35rpx;    height: 35rpx;}.cancleSearch {    position: absolute;    right: 0;    width: 126rpx;    height: 100rpx;    line-height: 100rpx;    text-align: center;    font-size: 15px;    color: #323232;}.hide {    display: none;}.history {    float: left;    position: relative;    height: 100%;    width: 100%;}.history-header {    float: left;    position: relative;    height: 110rpx;    width: 100%;}.title {    position: absolute;    font-size: 13px;    color: #313131;    left: 7rpx;    top: 38rpx;}.delectHistory {    position: absolute;    width: 30rpx;    height: 30rpx;    top: 43rpx;    right: 57rpx;}.history-content {    display: flex;    flex-direction: row;    justify-content: space-around;    align-items: space-around;    flex-wrap: wrap;    margin-right: 50rpx;    height: 100%;    width: 650rpx;}.content {    font-size: 13px;    max-width: 400rpx; //缓存显示最大宽度    margin-top: 20rpx;    padding-left: 15rpx;    padding-right: 15rpx;    height: 50rpx;    line-height: 50rpx;    color: #757575;    text-align: center;    border-radius: 50rpx;    background-color: #f8f9fb;    overflow: hidden;    text-overflow: ellipsis; //文本超出400rpx的后面的内容用省略号代替    white-space: nowrap;    letter-spacing: 1px;}

最后