百度搜索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。
三、开发工具