您当前位置：首页 > web前端 > jscript > 实例代码教程：一个基于AJAX的自动完成

实例代码教程：一个基于AJAX的自动完成

来源：程序员人生发布时间：2014-05-05 04:05:03 阅读次数：2462次

　　建站学院(LieHuo.Net)技术文档 我想大家在访问某些网站的时候都曾见到过基于Ajax的自动完成功能,比如：http://www.google.com 输入：上，还没输入完毕，下面就有了：上网导航。如下图：

在新窗口中预览图片_建站学院(LIEHUO.NET)

　　一、引出Ajax的自动完成

　　现在要实现一个员工信息查询的功能，即根据输入的名字检索员工的详细信息。这是一个简单的数据表查询，在ASP.NET中实现这样的功能是比较简单的.

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

　　二、自动完成功能的实现
实现这样的功能需要按以下的步骤进行。

　　服务器端提供GetSearchItems方法给客户端，用来返回满足条件的员工列表。
　　客户端的输入框需要增加onkeydown响应函数，以便即时获取满足条件的员工列表。
　　通过客户端的JavaScript动态列出待选结果的列表，同时还要提供键盘和鼠标的响应。

　　三、服务器端实现

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

以下为引用的内容：
<httpHandlers>

<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro" />
</httpHandlers>

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

以下为引用的内容：
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}

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

以下为引用的内容：
    [AjaxPro.AjaxMethod()]
    public ArrayList GetSearchItems(string query)
    {
        ArrayList items = new ArrayList();
        StringBuilder queryString = new StringBuilder();
        queryString.Append("select employeeid,lastname,firstname,title,titleofcourtesy from dbo.Employees");
        queryString.Append(" where firstname like '%" + query + "%'");

        DataSet ds = DataBase.Instance.ReturnDataSet(queryString.ToString());
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            items.Add(ds.Tables[0].Rows[i][2].ToString());
        }
        return items;
    }

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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 实例解析站长查询工具的流量统计是否准确

下一篇 为什么有些css代码不起作用？

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点