基于AJAX的自动完成

我想大家在访问某些网站的时候都曾见到过基于Ajax的自动完成功能,比如http://www.google.com,www.56.com/.

一、引出Ajax的自动完成
现在要实现一个员工信息查询的功能，即根据输入的名字检索员工的详细信息。这是一个简单的数据表查询，在ASP.NET中实现这样的功能是比较简单的.
基于AJAX的自动完成

从上面可以看出,这种员工信息查询功能还存在一些不足，比如用户可能记不全员工的名字，只记得前面几个字母是什么，这样用户只能根据记忆猜测，一遍遍地尝试。如果在用户输入的同时，输入框下方可以给出相应的提示，辅助用户输入，那么用户进行检索的速度和成功率就会大大提高.这就是基于Ajax的自动完成功能.

二、自动完成功能的实现
     实现这样的功能需要按以下的步骤进行。
      · 服务器端提供GetSearchItems方法给客户端，用来返回满足条件的员工列表。
      · 客户端的输入框需要增加onkeydown响应函数，以便即时获取满足条件的员工列表。
      · 通过客户端的JavaScript动态列出待选结果的列表，同时还要提供键盘和鼠标的响应。

三、服务器端实现
     本文采用AjaxPro.NET作为Ajax开发框架，首先为使用AjaxPro.NET做一些准备工作。添加对AjaxPro.dll的引用，修改Web.config配置文件，在system.web节点下加入如下配置：

<httpHandlers>
2 基于AJAX的自动完成

3 基于AJAX的自动完成

<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro" />
4 基于AJAX的自动完成

</httpHandlers>

在页面后台代码（Default.aspx.cs）的Page_Load方法中增加下面的代码：

protected void Page_Load(object sender, EventArgs e)
2}

下面定义提供给客户端调用的方法GetSearchItems(),参数query为模糊查询的关键字值：

[AjaxPro.AjaxMethod()]
2 基于AJAX的自动完成

public ArrayList GetSearchItems(string query)
3}

GetSearchItems方法返回一个ArrayList对象，它将包含所有以用户输入字符串的员工名字。

四、客户端实现
相对于服务器端的方法而言，客户端的处理要复杂得多。首先来分析如何根据服务器端返回的ArrayList对象展示结果。这里用到了Web编程中“层”（div）的概念，通过JavaScript和DOM创建一个新的层div，将ArrayList中的每一个条目都作为其子节点加入到div中，而每一个条目也被看作是一个div，其中具体的文本内容则是一个span对象。

除了显示待选的结果之外，下拉区域还要对键盘、鼠标事件做出响应；为了实时地显示待选结果，还需要定时更新待选结果的列表。这些功能都封装在lookup.js中。下面是lookeu.js的定义：

// 下拉区背景色
2 基于AJAX的自动完成

var DIV_BG_COLOR = "#EEE";
3 基于AJAX的自动完成

// 高亮显示条目颜色
4 基于AJAX的自动完成

var DIV_HIGHLIGHT_COLOR = "#C30";
5 基于AJAX的自动完成

// 字体
6

var DIV_FONT = "Arial";
7 基于AJAX的自动完成

// 下拉区内补丁大小
8 基于AJAX的自动完成

var DIV_PADDING = "2px";
9 基于AJAX的自动完成

// 下拉区边框样式
10 基于AJAX的自动完成

var DIV_BORDER = "1px solid #CCC";
11 基于AJAX的自动完成

// 文本输入框
14 基于AJAX的自动完成

var queryField;
15 基于AJAX的自动完成

// 下拉区id
16 基于AJAX的自动完成

var divName;
17 基于AJAX的自动完成

// IFrame名称
18 基于AJAX的自动完成

var ifName;
19 基于AJAX的自动完成

// 记录上次选择的值
20 基于AJAX的自动完成

var lastVal = "";
21 基于AJAX的自动完成

// 当前选择的值
22 基于AJAX的自动完成

var val = "";
23 基于AJAX的自动完成

// 显示结果的下拉区
24 基于AJAX的自动完成

var globalDiv;
25 基于AJAX的自动完成

// 下拉区是否设置格式的标记
26 基于AJAX的自动完成

var divFormatted = false;
27 基于AJAX的自动完成

InitQueryCode函数必须在页面的onload响应中执行，该函数最后调用setTimeout方法执行了mainLoop方法。注意，mainLoop方法并没有在lookup.js中定义，必须在包含lookup.js文件的页面文件中增加该函数的定义。于此，我们就需要在Default.aspx页面上加入如下定义：

mainLoop = function()
4script>

由上述代码可以看到mainLoop函数每隔100ms会执行一次，它会判断当前文本输入框的值和上次提交查询的值是否相同，如果不同，它会重新向服务器发送请求进行查询，并且更新下拉区域的显示。
于此，一个基于 Ajax的自动完成功能就实现了。

本文借鉴于《ajax web2.0快速入门与项目实践》。
这本书上还使用了控件将该功能进行了封装，这样要实现Ajax的自动完成功能就更加方便了。在此就不做过多解说。

本文示例代码下载：AutoComplete.rar

---------------------------------------------------------------------------------------------------------