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})}},
