作者：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 =