学习了ES6的课程，我们来实现下自定义的可分类可搜索的下拉框组件。一个可以搜索和已经归类的下拉框可以提升用户的选择速度。一个好的表单组建，能有极大的提升用户体验。

一、语言和环境

      1、实现语言

             HTML、CSS、ES6

      2、 环境要求及开发工具

             建议 Sublime text

二、网页整体要求：

1、 要求页面整洁、美观，与提供的页面效果图保持一致

2、 要求代码书写与命名符合规范，在代码中添加必要的注释。

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

三、具体要求：

1、 实现一个自定义的可分类可搜索的下拉框组件，要求整体垂直居中显示

2、 根据原生的select中的每一项提供的类型和值，使用脚本获取，然后进行分类重新显示

3、 给下拉框中下列的每项绑定事件，点击的时候可以切换下拉列表的显示

4、 鼠标移入每项的时候，背景颜色为灰色，点击的选项显示为背景颜色蓝色、字体白色

5、 给搜索框绑定事件，可以通过输入的内容对分类进行筛选

6、 列表下面显示，之前的值以及改变后的值

7、 要多次用到的方法，可以提取出来写成公共方法

8、 在下拉列表展开时，点击非下拉框的部分可以收起下拉列表

9、 点击按钮与下拉框部分，若当前下拉列表是显示的，可以闭合收起列表；若当前是闭合的，则可以显示列表

四、建议：

               具体可以参考效果图

 规范【8分】

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

        * HTML、CSS、脚本代码规范及添加适量注释

        * 文件、id、class命名规范

网页整体【10分】

        * 页面整洁，与效果图保持一致

脚本及样式效果【82分】

        * 整体垂直居中显示

        * 根据原生的select中的每一项提供的类型和值，使用脚本获取然后进行分类重新显示

        * 且给下拉框展示下拉框的每项绑定事件，点击的时候可以切换下拉列表的显示

        * 鼠标移入每项的时候，背景颜色为灰色，点击的选项显示为背景颜色蓝色、字体白色

        * 给搜索框绑定事件；当内容变化的时候，可以通过输入的内容对分类进行筛选，且形成新的列表显示

        * 列表下面显示，之前的值以及改变后的值

        * 在下拉列表展开时，点击非下拉框的部分可以收起下拉列表

        * 要多次用到的方法，可以提取出来写成公共方法

        * 点击按钮与下拉框部分，若当前下拉列表是显示的，可以闭合收起列表；若当前是闭合的，则可以显示列