微信小程序開發之帶搜索記錄的搜索框

實現功能：點擊搜索框，有搜索記錄時以下拉菜單顯示，點擊下拉子菜單，將數據賦值到搜索框，點擊搜索圖標搜索，支持清空歷史記錄，可手動輸入和清空查詢關鍵字，

 

UI:

 

wxml：

<!--查詢歷史記錄數據-->
<view class="ddclass" style="margin-left: 50rpx;z-index:80" hidden="{{!StorageFlag}}" style="z-index:100">
  <view wx:for="{{sercherStorage}}" wx:key="item.id">
    <view class="liclass" style="color:#ec9e14;border-bottom:0;" id="{{item.id}}" bindtap="tapSercherStorage">
      <text style="width:100rpx">{{item.name}}</text>
    </view>
  </view>
  <view wx:if="{{sercherStorage.length!==0}}" style="text-align:center;" bindtap="clearSearchStorage">
    <text style="text-align:center;color:red;font-size:28rpx">清空歷史記錄</text>
  </view>
</view>

 

wxss：

/*二級菜單外部容器樣式*/
   .ddclass {
 position: absolute;
 width: 100%;
 margin-top: 10px;
 left: 0;
 
}

 
/*二級菜單普通樣式*/
 
 .liclass {
 font-size: 14px;
 line-height: 34px;
 color: #575757;
 height: 34px;
 display: block;
 padding-left: 18px;
 background-color: #fff;
 border-bottom: 1px solid #dbdbdb;
}
 
/*二級菜單高亮樣式*/
 
 li.highlight {
 background-color: #f4f4f4;
 color: #48c23d;
}

 

js：

data:{

sercherStorage: [],  

inputValue: "",             //搜索框輸入的值  

StorageFlag: false,         //顯示搜索記錄標志位

}

 

  //獲取輸入框的輸入信息
  bindInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

 //清楚輸入框數據
  clearInput:function(){
    this.setData({
      inputValue: ""
    })
  },
  //清楚緩存歷史並關閉歷史搜索框
  clearSearchStorage: function () {
    wx.removeStorageSync('searchData')
    this.setData({ sercherStorage: [],
      StorageFlag: false,  })
  },
  //點擊緩存搜索列表
  tapSercherStorage:function(e)
{
    var that = this;
    var index = parseInt(e.currentTarget.id);
    for (var j = 0; j < that.data.sercherStorage.length; j++) {
      if (j == index) {
        //將所選的搜索歷史加到搜素框
        this.setData({
          inputValue: that.data.sercherStorage[j].name,
          StorageFlag: false,   
        })
      }}
    if (this.data.inputValue != '') {
    //請求搜索記錄
    }

},  
//打開歷史記錄列表
  openLocationsercher:function(e)
  {
    this.setData({
      sercherStorage: wx.getStorageSync('searchData') || [],   //調用API從本地緩存中獲取數據
      StorageFlag: true,
      listFlag: true,
    })
  },
//添加搜索記錄並搜索
  setSearchStorage: function () {
    //let data;
    var that=this;
  //let localStorageValue = [];
    if (this.data.inputValue != '') {
      //將搜索記錄更新到緩存
      var searchData = that.data.sercherStorage;
      searchData.push({
        id: searchData.length,
        name: that.data.inputValue})
      wx.setStorageSync('searchData', searchData);
      that.setData({ StorageFlag: false,})
      
      //請求搜索
      /*wx.request({
        url: '',
        data: {SercherValue:that.data.inputValue,
            SercherTypeNum:that.data.SercherTypeNum,
            typeItem:that.data.typeItem },
        header: {},
        method: '',
        dataType: '',
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
      })*/
      //wx.navigateTo({
      //  url: '../result/result'
     // })
      // console.log('馬上就要跳轉了！')
    } else {
      console.log('空白的你搜個jb')
    }
    // this.onLoad();
  },