JavaScript实现百度搜索suggestion功能

百度搜索suggestion功能增强了用户体验，现在很多带有搜索功能的网站都会有类似搜索suggestion功能，用以增强用户体验。

暑假的时候试着做了一个百度搜索suggestion功能的demo练习，记录一下，以便以后查看。

一、需求分析

① 基本需求：

1、在输入框输入关键字后，出现下拉框，下拉框中为suggestion的内容。根据不同的关键字，显示不同的suggestion。

2、下拉框支持鼠标点选，鼠标移到suggestion的选择项时，要将对应的字段自动填入百度输入框

3、要对suggestion下拉框进行动态处理，百度输入框失去焦点时，suggestion下拉框要自动消失。

4、下拉框支持上下键切换，键盘的上下键可对下拉框中的suggestion选项进行选择，当前选项应该自动填入百度输入框。

② 扩展需求：

1、suggestion数据来时百度（jsonp跨域请求js）

2、点击“百度一下”按钮可进行百度搜索。

3、按回车键可对单前百度输入框中的字段进行搜索。

二、技术分析

1、根据suggestion字段内容，动态生成对应的suggestion下拉框，这里需要用到Dom节点的操作。

2、鼠标点选，这里需要触发鼠标事件。

3、键盘上下键选择，这里需要触发键盘事件

4、动态改变CSS样式

5、向百度后台发jsonp请求，跨域请求js。

三、开发工具