微信小程序搜索框以及简单的页面内容搜索的实现

1 效果

先来看一下效果

2 设计思路

2.1 显示效果的设计

本示例包含两种不同的搜索框，第一种搜索框是在最初状态下显示的搜索框，它由一个输入框input和一个表示“搜索”的图片组成。

第二种搜索框是开始输入时的搜索框，它由一个输入框input和一个表示“取消”的图片组成。

我们可以设置一个标志位focus来表示输入框是否获得了焦点，用于两种形式的搜索框的切换。初始状态下focus=false，于是显示第一种搜索框。当我们在初始状态下点击搜索框时，会触发获得焦点事件，我们可以在输入框的属性中添加bindfocus，为其绑定一个事件处理函数。在事件处理函数中把focus设置为true，就切换到第二种输入框来显示。

在切换到第二种输入框时，把我们所有的数据都放在一个scroll-view中显示。当输入内容时，触发输入事件，为输入框添加bindinput属性，在事件处理函数中查询是否有数据项与输入的内容匹配。如果有，则只显示匹配的数据项。

当点击搜索框右边的图片“取消”时，图片的bindtap属性则会调用相应的函数，在这个函数里，我们把focus设置为false，这样就会切换回第一种输入框的状态，我们也可以利用focus这个标志位来控制scroll-view是否显示，都是用到wx:if=“{{focus}}”。

2.2 文本搜索的实现

如果我们的数据并不是很多，那么就可以存放在页面的js文件中的data里。利用以下方法可以查找是否有数据项与输入的内容匹配：
data里定义两个数组：

 list: [{'name':'连花清瘟胶囊','num':'1盒'},{'name':'感冒灵颗粒','num':'1盒'},{'name':'维生素C','num':'2瓶'},{'name':'蒲地蓝消炎片','num':'3盒'}],   //这是搜索到的结果list2: [{'name':'连花清瘟胶囊','num':'1盒'},{'name':'感冒灵颗粒','num':'1盒'},{'name':'维生素C','num':'2瓶'},{'name':'蒲地蓝消炎片','num':'3盒'}],    //这是所有可供查询的记录

在js中的查询函数：

     var list = this.data.list2;        //先把所有数据项保存var list2 = [];     //定义一个数组//循环取每个数据项的主键，即药品名namefor(var i=0;i<list.length;i++){var string = list[i].name;//查询name是否包含输入框内输入的关键词，如果有就把该数据项装进list2数组if(string.indexOf(e.detail.value) >= 0){list2.push(list[i]);}}//到这里list2就是与搜索结果匹配的数据项了//如果输入的关键词为空就加载原来的全部数据，不是空就加载搜索到的数据if(e.detail.value == ""){//加载全部this.setData({list: list})} else {this.setData({list: list2})}

3 附代码

wxml：

<!-- 一般情况下的搜索框显示 -->
<view wx:if="{{!focus}}" class='search'><image class="search_image" src='/icon/search.png'></image><input type='text' placeholder='搜索药品' placeholder-class="center" confirm-type='search' bindfocus="focusHandler"></input>
</view>
<!-- 获得焦点时的搜索框，多一个取消按钮 -->
<view wx:if="{{focus}}" class='search'><input class="search_input" type='text' placeholder='搜索药品' confirm-type='search' value="{{inputValue}}"  bindinput='query'></input><image class="search_image" src='/icon/cancel.png' bindtap='cancelHandler'></image>
</view><!-- 搜索结果显示框 --><scroll-view wx:if="{{focus}}" class="scrollview" scroll-y="true"><view wx:for="{{list}}" wx:key="name"><view class="scrollItem"><text class="font1" space="nbsp">   {{item.name}}</text><text class="font2"space="nbsp">{{item.num}}   </text></view></view></scroll-view>

js：

Page({/*** 页面的初始数据*/data: {list: [{'name':'连花清瘟胶囊','num':'1盒'},{'name':'感冒灵颗粒','num':'1盒'},{'name':'维生素C','num':'2瓶'},{'name':'蒲地蓝消炎片','num':'3盒'}], //这是搜索到的结果list2: [{'name':'连花清瘟胶囊','num':'1盒'},{'name':'感冒灵颗粒','num':'1盒'},{'name':'维生素C','num':'2瓶'},{'name':'蒲地蓝消炎片','num':'3盒'}],    //这是所有可供查询的记录focus:false,  //控制是否显示带取消按钮的搜索框inputValue:""},focusHandler(e){this.setData({focus:true});},cancelHandler(e){this.setData({focus:false});},query(e){this.setData({inputValue: e.detail.value})  //首先回显输入的字符串//实现搜索的功能var list = this.data.list2;     //先把第二条json存起来var list2 = [];      //定义一个数组//循环去取数据for(var i=0;i<list.length;i++){var string = list[i].name;//查询json里的name是否包含搜索的关键词，如果有就把他装进list2数组if(string.indexOf(e.detail.value) >= 0){list2.push(list[i]);}}//到这里list2就已经是你查出的数据//如果输入的关键词为空就加载原来的全部数据，不是空就加载搜索到的数据if(e.detail.value == ""){//加载全部this.setData({list: list})} else {this.setData({list: list2})}},

代码下载：包含wxml、wxss、js文件
点击下载