jQuery学习记录----仿GoogleSuggest自动提示（八）

自动提示程序相对前面几个稍微复杂些。下面介绍一下思路：

1、建立一个servlet，用于取前台页面文本框输入的值。可以转发到一个JSP页面，如wordxml.jsp。

2、在wordxml.jsp页面将后台要提示的数据组织成XML数据，此时不同的是要返回的是XML数据，而不是整个页面，所以在JSP页面page指令处设置一下contentType="text/xml; charset=utf-8".根据页面输入框的内容，返回以此内容开始的所有XML数据。

3、创建一个页面，如autoComplete.htm，有一文本框，一搜索按钮。另外要提示出来的框其实是一个DIV，页面初始时将该DIV隐藏。

4、创建一JS文件，如autoComplete.js用于处理自动提示。此过程分为以下几步：

1）、设置提示框在页面初始时隐藏，设置一个边框等CSS样式，使其在输入框的正下方，宽度也输入框同样。

2）、给搜索按钮添加点击事件。

3）、给文本框添加键盘事件keyup，请求服务器，返回对应的XML数据，遍历这个XML数据，例如符合条件的有5条XML数据，创建5个DIV来存储这5条XML数据，将新创建的DIV添加到页面autoComplete.html中的DIV中。

4）、判断如果按下的是上下箭头，修改选中一行的DIV的背景色，即使其高亮显示。这里可以定义一个全局变量如highlightindex，初始值为-1。上一步生成的各个DIV，索引从0开始，依次递增，这样按上下箭头时highlightindex的值加1或减1就可以表示选中的是哪个DIV了。

5）、判断如果按下的是回车键，分两种情况，如有高亮（即highlightindex!=-1）时，将高度显示的DIV的内容显示到输入框中，如无高度时，按下回车相当于点击搜索按钮。

6）、通过前几步，应该可以实现大部分功能，只是没有设置鼠标事件。如想响就应鼠标事件，可以在第3）步生成DIV后，添加鼠标事件：mouseover,mouseout,click，当鼠标移进时高亮显示，移出时将高亮显示的内容取消，点击时将点击的DIV内容显示到输入框中即可。

5、最后补充一点,为了减轻服务器的压力，适应一些快速打字的用户，在第4步3）中，可以通过setTimeout(函数，延迟毫秒数)设置延迟请求服务器，这样可以提高效率。

 

本篇涉及的代码在附件中。