小程式搜尋功能的實現
阿新 • • 發佈:2018-12-29
搜尋頁面(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)存入,在頁面迴圈顯示即可