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

先来看一下效果

本示例包含两种不同的搜索框，第一种搜索框是在最初状态下显示的搜索框，它由一个输入框input和一个表示“搜索”的图片组成。 第二种搜索框是开始输入时的搜索框，它由一个输入框input和一个表示“取消”的图片组成。 我们可以设置一个标志位focus来表示输入框是否获得了焦点，用于两种形式的搜索框的切换。初始状态下focus=false，于是显示第一种搜索框。当我们在初始状态下点击搜索框时，会触发获得焦点事件，我们可以在输入框的属性中添加bindfocus，为其绑定一个事件处理函数。在事件处理函数中把focus设置为true，就切换到第二种输入框来显示。

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

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

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

在js中的查询函数：

wxml：