1. 程式人生 > >小程式搜尋功能的實現

小程式搜尋功能的實現

 搜尋頁面(receiveCenter.wxss)

 <view class="search">
      <view class="search_arlet">
        <icon class="searchcion" size='15' type='search'></icon>
        <input type='text' disabled placeholder="門點、港區搜尋" value="{{store}}" bindtap='searchInput'/>
      </view>
    </view>

跳轉到新建搜尋頁面 

data:{
    store:''//新建搜尋頁面傳遞過來的值
}
// 搜尋
  searchInput:function(){
      var that = this
      wx.navigateTo({
        url: baseUrl + api.pageUrl.SEARCH_PAGE_URL + '?id=' + this.data.store
      })
  },

新建搜尋頁面search.wxml

<view class="search">
      <view class="search_arlet">
        <icon class="searchcion" size='15' type='search'></icon>
        <input class="text" focus="{{name_focus}}" placeholder="門點、港區搜尋" data-store="{{inputValue}}" value="{{inputValue}}" bindinput='searchInput' bindconfirm="setSearchStorage" />
      </view>
    </view>
    <view class="textSearch">
     <text>空內容搜尋為搜尋全部</text>
    </view>
  <view class="Search_record_box">
    <view class="Search_record_text">
      <text>歷史搜尋</text>
      <image bindtap='clearSearchStorage' src='../../../images/delecte.png'></image>
    </view>
    <view class="History-box">
    <view class="History-list" wx:for="{{getSearch}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx" >
      <text wx:if="{{itemName != ''}}" data-text="{{itemName}}" bindtap='this_value'>{{itemName}} </text>
    </view>
    </view>
   </view>
    <modal class="modal" hidden="{{modalHidden}}" bindconfirm="modalChangeConfirm" bindcancel="modalChangeCancel">
      <view class='qingk'>清空瀏覽記錄</view>
    </modal>

 新建搜尋頁面search.js

 

data: {
    inputValue: '',//輸入的值
    getSearch: [],歷史記錄
    modalHidden: true,
    name_focus: true,//獲取焦點
    keydown_number: 0,//檢測input框內是否有內容
    store:''
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    //獲取上一頁面傳遞過來的值
    var store = options.id;
    this.setData({
      store: store
    })
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    var getSearch = wx.getStorageSync('searchData');
    var store = this.data.store
    //只顯示十條歷史記錄
    if (getSearch.length < 10) {
      getSearch.push(this.data.inputValue)
    } else {
      getSearch.splice(0, 1)
      getSearch.push(this.data.inputValue)
    }
    this.setData({
      getSearch: getSearch,
      inputValue: store
    })
    console.log('search is onshow')
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
    console.log('search is onHide')
    wx.redirectTo({
      url: '../search/search'
    })
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  },
//獲取輸入的值
  searchInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
    console.log('bindInput'+this.data.inputValue)  
  }, 
  //點選賦值到input框
  this_value: function (e) {
    this.setData({
      name_focus: true
    })
    let value = e.currentTarget.dataset.text;
    this.setData({
      inputValue: value,
      keydown_number: 1
    })
  },
  //回車搜尋
  setSearchStorage:function(e){
    let store = e.currentTarget.dataset.store
    let data;
    let localStorageValue = [];
    //設定一個空陣列,把每次輸入的值存進去
    判斷如果小於等於10就新增進陣列,否則就刪除下標為零的值
      var searchData = wx.getStorageSync('searchData') || []
    if (searchData.length <= 10){
      searchData.push(this.data.inputValue)
    }else{
      searchData.splice(0, 1)
      searchData.push(this.data.inputValue)
    }
      wx.setStorageSync('searchData', searchData)
      let pages = getCurrentPages();//當前頁面
      let prevPage = pages[pages.length - 2];//上一頁面
        //把值傳入上一搜索主頁面
      prevPage.setData({
        store: e.currentTarget.dataset.store,
      });
      wx.navigateBack({
        delta: 1
      })
    // this.onLoad();
  },
  modalChangeConfirm: function () {
    wx.setStorageSync('searchData', [])
    this.setData({
      modalHidden: true
    })
    wx.redirectTo({
      url: '../search/search'
    })
  },
  modalChangeCancel: function () {
    this.setData({
      modalHidden: true
    })
  },
  clearSearchStorage: function () {
    this.setData({
      modalHidden: false
    })
  }
@import "../receiveCenter.wxss";
page{
  height: 100%;
}
.Search_record_box{
  height:90%;
  background-color: white
}
.textSearch{
  font-size: 28rpx;
  color: #898989;
  margin-left: 30rpx;
  padding: 20rpx;
}
.Search_record_text{
  width:92%;
  height: 44rpx;
  padding: 15rpx;
  margin: 0px auto
}
.Search_record_text>text {
  font-size: 28rpx;
  color: #898989;
}
.hot_box_text>text {
  font-size: 28rpx;
  color: #898989;
  margin-left: 20rpx;
}
.hot_box_text {
   margin-top: 40rpx;
}
.Search_record_text>image {
  width: 44rpx;
  height: 44rpx;
  vertical-align: middle;
  float: right;
  margin-top: 5rpx;
}
.History-box{
  width: 100%;
}
.History-list {
  width: 90%;
  margin: 10px auto
}
.History-list>text {
  height: 65rpx;
  border-radius: 5px;
  background: #f5f5f5;
  max-width: 100%;
  padding-left: 24rpx;
  padding-right: 24rpx;
  line-height: 65rpx;
  font-size: 33rpx;
  color: #393939;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
  box-sizing: border-box;
  margin-right: 20rpx;
  float: left;
}
.qingk{
  margin-left: 200rpx;
}

 點選回車時把值傳給上一頁面,上一頁面呼叫介面把要搜尋的值根據介面賦值即可搜尋

歷史記錄利用wx.getStorageSync(string key)存入,在頁面迴圈顯示即可