小伙伴们，我们学习了Ajax与Json的内容，接下来让我们去实现下图中所展示的效果吧！（上传作业时，记得也要将图片文件夹放进去一起打包上传）

效果图如下：

一、语言和环境

    1、实现语言

                 HTML、CSS、jQuery、AJAX、JSON

    2、 环境要求及开发工具

                 建议 HBuilder

二、网页整体要求：

    1、 要求结合给出的HTML、CSS、JSON数据，使用jQuery Ajax完成数据异步加载

    2、 在代码中添加必要的注释

    3、 使用外部的脚本文件

    4、 网页文件夹管理，图片、样式、脚本等资料独立文件夹

三、 具体要求：

    1、 当输入特定字符（在JSON数据定义的是查询字符串('鞋')）时，弹出一个下拉列表弹出。

    2、下拉列表弹出中，每一个li元素都有相应的数据（调用search.json），动态加载HTML，最后插入到客户端的某个空容器中。

    3、 在搜索框输入字符串'鞋'，按下回车键，会有相应的商品被异步加载到页面中（调用basketballShoes.json）

    4、 在搜索框输入'音速3'，按下回车，相应的商品被异步加载到页面中（调用basketballShoes.json）

    5、 在搜索框中查询，并且将商品异步加载到页面中，所有的事件都需要绑定到非动态加载HTML的元素上

规范【12分】

        * 网页文件夹管理，图片、样式表、脚本等资料独立文件夹。

        * 脚本代码规范及添加适量注释。

网页整体【10分】

        * 页面与效果图保持一致

顶部【78分】

        * 使用jQuery Ajax的$.get方法获取json数据。

        * 当输入特定字符（在JSON数据定义的是查询字符串('鞋')）时，弹出下拉列表，动态加载HTML，最后插入到客户端的某个空容器中。

        * 在搜索框输入字符串'鞋'按下回车键将相应的商品异步加载到页面中。        

        * 当输入特定字符（在JSON数据定义的是查询字符串('音速3')）时，弹出下拉列表，动态加载HTML，最后插入到客户端的某个空容器中。

        * 在搜索框输入'音速3'，按下回车，相应的商品被异步加载到页面中。

        * 所有的事件都需要绑定到非动态加载HTML的元素上。