在一些著名的网站的搜索框上，会有一种“自动完成”功能。
比如google、百度和淘宝：
现在，我们来考虑如何实现这个功能。
第一步：模仿任意一个网站，编写一个类似的网页效果原型。
在这一步，不要估计开发时间。
把学习新技术（一些前端基础知识）的时间花在这个阶段。
以完成原型为目标，不必深入技术。
去 http://www.w3schools.com/ 获得入门知识
去 https://developer.mozilla.org/ 查阅文档
第二步：仔细观察三个网站的“自动完成”功能，比较它们<strong>功能</strong>的相同点和不同点，写成一份简单的需求分析文档。
请仅仅从功能角度分析这三个组件。
提示，如果你试图从代码中找到答案，你很可能陷入地狱。
除了界面，可以关注一些细节，比如键盘操作、响应时间。
第三步：设计并实现一个“自动完成”组件，使得它能够把三个网站的自动完成功能应付自如。
按照软件工程的模型进行设计、复审和实现。
在设计阶段，讨论清楚这个组件的用户需要面对的API：它们的命名、调用方式、编程风格、它所依赖的框架（如果有必要的话）。
尽量让使用变得简单。
尽量用可扩展性代替枚举需求。
根据第二步的需求来完成代码，不必试图跟原版"一模一样"。
考虑清楚如何管理这个组件用到的html、css和js代码。
第四步：找到另一个网站的自动完成功能，试试看我们的“自动完成”组件是否能够实现它！
如果可以实现，和小伙伴们讨论下，为什么你们的组件能够应对未知的需求？回顾设计阶段，哪些设计要素产生了关键性作用？
如果不可以实现，和小伙伴讨论下，为什么你们的组件无法应对新需求？需要做怎样的设计变更和代码重构，才能支持新的需求？