java ajax搜索提示_ajax之搜索框关键字提示语

功能需求：

用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语。

用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。

技术分析：

ajax技术+servlet+jsp+jdbc

功能分析(思路)：

1、创建搜索界面(搜索框和提示语div和搜索按钮)

2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求

请求当前用户输入的信息对应的提示语数据

3、将提示语数据填充到搜索框下的div中

问题：

现在用户在搜索框上单击键盘的任意一个键都会发起ajax请求，请求提示语数据。

解决：

判断用户单击的键盘的按键符合要求再发请求。

解决：

获取用户按了键盘的哪个键。使用event对象进行按键的键盘码值获取

4、实现使用鼠标选择提示语

5、实现使用键盘的上和下键选择提示语

6、实现鼠标和键盘的联动操作

7、将显示提示语的div进行隐藏，当有提示语的时候显示隐藏的div

完善：

问题1：只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行。

而只要数据符合要求，都会发送ajax请求，请求提示语信息。点击一次都发一次。

但是其实只需要最后一次进行请求发生即可。

解决1:

使用延迟发送请求。

使用1：

window.setTimeout

问题2：

event对象在火狐浏览器中使用window.event获取不到。

解决2:

在获取浏览器中使用传参的方式给event进行赋值。

使用：参照源码即可

数据库设计：

创建表:(data) 存储了常用的关键字数据

关键字编号：id

关键字数据：title

说明：remark

添加测试数据:要求前期测试数据为英文单词

SQL语句设计:查询以用户当前搜索框数据开头的关键字

select * from t_data where title like 'a%'

注意：

测试数据不要太多。

数据库实现：在数据库中创建表即可,并添加测试数据。