小程序-电影首页搜索功能（八）

                                   首页的搜索功能，搜索后跳转到已经搜索完毕的页面

1. 添加input以及搜索图标，定义css

2. 聚焦事件，每输入一个字都会弹出相应的电影名称。
3. 添加onBindFocus 事件
4. 在bandang.wxml的最下面定义一个view用作跳转到搜索完毕以后的页面，因为搜索完毕以后的页面其实也就是之前的movieGridTemplate，所以在这里直接引用它，然后设置css（由于这个view要在搜索框的下面所以要设置它的高度以及浮动）
5. 定义显示和隐藏两个变量，定义完以后当获取焦点时更新这两个变量的状态

1. 6.当鼠标聚焦时，bandang页面隐藏，而搜索页面显示
2. 为了验证这个是否成功，我们在movie-grid-template里面加一个text，如果成功则页面会出现这个text

3. 运行结果出现这个代表成功

4. 现在编写把这个页面关闭的功能，首先加入一个X号的图标，当点击时退出搜索页面
5. 实现点击事件onCancelImgTap
6. x图标是在鼠标聚焦时才出现的，也就是搜索的时候它显示，关闭的时候它消失，所以将它绑定一下searchPanelShow
7. 编写提交事件

8. 测试是否成功，在input里面输入数值当鼠标不聚焦时执行，当按回车键时执行Bindblur和bindchange的区别：bindchange在鼠标不聚焦时执行，且在使用回车键时也执行搜索，但是bindblur只有鼠标不聚焦时执行，按回车时无法执行搜索

9. 编写onBindChange，调用getMovieListData方法
10. 在wxml文件接收
11. 引入movie-grid-template。Wxss

12. 运行搜索得到结果

13. 搜索完毕以后再次搜索时让上一次的搜索结果清空，也就是当再次点击input时下面的在上一次搜到的电影列表会清空