微信小程序> 小程序搜索功能的实现

小程序搜索功能的实现

浏览量:763 时间: 来源:一隻黑猫

 搜索页面(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_texttext {  font-size: 28rpx;  color: #898989;}.hot_box_texttext {  font-size: 28rpx;  color: #898989;  margin-left: 20rpx;}.hot_box_text {   margin-top: 40rpx;}.Search_record_textimage {  width: 44rpx;  height: 44rpx;  vertical-align: middle;  float: right;  margin-top: 5rpx;}.History-box{  width: 100%;}.History-list {  width: 90%;  margin: 10px auto}.History-listtext {  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)存入,在页面循环显示即可

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎