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

需求

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

分割功能需求

主要分割为这几个步骤：

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<jobList.length;i++){
      //   if(jobList[i].jobName.match(reg)){
      //     result.push(jobList[i]);
      //     this.setData({
      //       result
      //     })
      //   }
      // }
     let searchData = this.data.sercherStorage;
      searchData.push({
        id: searchData.length,
        name: value
      })
      wx.setStorageSync(‘searchData‘, searchData); //设置缓存
      this.setData({
        isConfirm: true,  //隐藏搜索按钮
        width: ‘95%‘,
        inputValue: value,
        isHide: true,   //隐藏历史记录container
        isShow: false,    //隐藏图标以及标签栏
        isCover: false    //显示搜索结果
      })
    } else {
      wx.navigateBack({
        delta: 1, // 回退前 delta(默认为1) 页面
      })
    }//点击取消回到上个页面

  },

效果：

第三步

  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:

<import src="../../templates/template" />
<view class="searchContainer">
    <view class="search" style="width:{{width}};">
        <image class="searchImg" src="../../youzan-image/search.png"></image>
        <input class="searchInput" value="{{inputValue}}" auto-focus bindinput="changeValue" />
    </view><import src="../../templates/template" />
    <view class="cancleSearch {{isConfirm?‘hide‘:‘‘}}" bindtap="confirmValue">{{confirm}}</view>
    <view class="history {{isHide?‘hide‘:‘‘}}">
        <view class="history-header {{isShow?‘‘:‘hide‘}}">
            <view class="title">历史搜索</view>
            <image class="delectHistory" src="../../youzan-image/delete.png" bindtap="clearStorage"></image>
        </view>
        <view class="history-content">
            <view wx:for="{{sercherStorage}}" wx:key="item.id">
                <view class="content">{{item.name}}</view>
            </view>
        </view>
    </view>
    <view class="result {{isCover?‘hide‘:‘‘}}">
    <view wx:for="{{result}}" wx:key="index" data-index="{{index}}">
        <template is="list-item" data="{{...item}}" />
    </view>
    <!-- <view class="a">test</view> -->
    </view>
</view>

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;
}

最后

完整源码