在一些著名的网站的搜索框上，会有一种“自动完成”功能。

比如google、百度和淘宝：

现在，我们来考虑如何实现这个功能。

第一步：模仿任意一个网站，编写一个类似的网页效果原型。

在这一步，不要估计开发时间。

把学习新技术（一些前端基础知识）的时间花在这个阶段。

以完成原型为目标，不必深入技术。

去 http://www.w3schools.com/ 获得入门知识

去 https://developer.mozilla.org/ 查阅文档

第二步：仔细观察三个网站的“自动完成”功能，比较它们<strong>功能</strong>的相同点和不同点，写成一份简单的需求分析文档。

请仅仅从功能角度分析这三个组件。

提示，如果你试图从代码中找到答案，你很可能陷入地狱。

除了界面，可以关注一些细节，比如键盘操作、响应时间。

第三步：设计并实现一个“自动完成”组件，使得它能够把三个网站的自动完成功能应付自如。

按照软件工程的模型进行设计、复审和实现。

在设计阶段，讨论清楚这个组件的用户需要面对的API：它们的命名、调用方式、编程风格、它所依赖的框架（如果有必要的话）。

尽量让使用变得简单。

尽量用可扩展性代替枚举需求。

根据第二步的需求来完成代码，不必试图跟原版"一模一样"。

考虑清楚如何管理这个组件用到的html、css和js代码。

第四步：找到另一个网站的自动完成功能，试试看我们的“自动完成”组件是否能够实现它！

如果可以实现，和小伙伴们讨论下，为什么你们的组件能够应对未知的需求？回顾设计阶段，哪些设计要素产生了关键性作用？

如果不可以实现，和小伙伴讨论下，为什么你们的组件无法应对新需求？需要做怎样的设计变更和代码重构，才能支持新的需求？