小程序搜索功能的实现

 搜索页面（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)存入,在页面循环显示即可