作者：ITDragon龍，原文地址 
這章談談搜索和本地緩存。主要功能有，點擊搜索顯示搜索輸入框同時顯示搜索歷史記錄，點擊右側搜索按鈕搜索數據同時保存到搜索歷史記錄中，清除歷史記錄等功能。 
效果圖： 

先介紹搜索的功能： 
第一步，做一個搜索的輸入框，可以利用weui-wxss框架中searchbar。沒有weui-wxss 可以在 https://github.com/weui/weui-wxss 找到目錄 dist - example - searchbar 目錄下找到。我將原本的"取消"換成了"搜索"的觸發按鈕。并修改 bindtap="searchData" 

1. <view class="weui-search-bar">
2. <view class="weui-search-bar__form">
3. <view class="weui-search-bar__box">
4. <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
5. <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/>
6. <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
7. <icon type="clear" size="14"></icon>
8. </view>
9. </view>
10. <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
11. <icon class="weui-icon-search" type="search" size="14"></icon>
12. <view class="weui-search-bar__text">搜索</view>
13. </label>
14. </view>
15. <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData">搜索</view>
16. </view>
17. <view wx:if="{{searchLogShowed}}">
18. <view class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}" wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}">
19. {{searchLog}}
20. </view>
21. <view class="clear-search-log" bindtap="clearSearchLog">清除搜索記錄</view>
22. </view>

js：

1. Page({
2. data:{
3. msgList:[], // 存儲文章列表信息
4. searchLogList:[], // 存儲搜索歷史記錄信息
5. hidden:true, // 加載提示框是否顯示
6. scrollTop : 0, // 居頂部高度
7. inputShowed: false, // 搜索輸入框是否顯示
8. inputVal: "", // 搜索的內容
9. searchLogShowed: false // 是否顯示搜索歷史記錄
10. },
11. onLoad:function(options){
12. // 頁面初始化 options為頁面跳轉所帶來的參數
13. var that = this;
14. wx.getSystemInfo({
15. success: function(res) {
16. that.setData( {
17. windowHeight: res.windowHeight,
18. windowWidth: res.windowWidth
19. })
20. }
21. });
22. // 如果緩存中有值，先從緩存中讀取
23. var info =