搜索页面(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 = thiswx.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.storelet 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)存入,在页面循环显示即可