AjaxPro版自动完成（Autocomplete）功能实现

来源：互联网发布：飞车辅助软件编辑：程序博客网时间：2024/05/16 17:51

07年的时候写过一篇有关自动完成(Atuocomplete)的文章 asp.net Ajax ---AutoComplete控件使用，那篇文章中使用的是Asp.net Ajax ControlTollKit中的一个控件，虽然那时对里面几十个控件都研究过，不过遗憾的是在实际开发中确从未用到过，鉴于现在Ajaxpro的易用性和普遍性，本文将使用ajaxpro来实现自动完成的功能。

使用Ajaxpro之前，还是来重温下使用Ajaxpro的四个必备条件。

1 添加对Ajaxpro的引用。

2 配置webconfig的httpHandlers 节点，代码如下：

3 在PageLoad中注册类，代码如下

AjaxPro.Utility.RegisterTypeForAjax(typeof(Autocomplete2.AjaxproDemo));

4 后台被调用的方法上要写上[AjaxPro.AjaxMethod()] 标记

本示例将采用Ajaxpro根据文本框中输入的关键字从后台取出结果返回到客户端，由于是演示后台使用List作为数据源，数据是用程序添加的，在正式使用时可以换成在数据库中取值的方式。代码如下：

前台代码：

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxproDemo.aspx.cs" Inherits="Autocomplete2.AjaxproDemo" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7     <title>Ajaxpro-Autocomplete</title>
8     <style type="text/css">
9     #divText
10     {
11         display:none;
12         position:absolute;
13         z-index:100;
14         width:252px;
15         height:200px;
16         border:1px solid #6EBDD0;
17         background-color:#EEF4F7;
18     }
19
20     #txtKeyword
21     {
22         width:250px;
23         border:1px solid #6EBDD0;
24     }
25     </style>
26
27     <script type="text/javascript">
28
29         function displayDiv(id, mode) {
30             var divText = document.getElementById("divText");
31             if (mode) {
32                 divText.style.display = "inline";
33             } else {
34                 divText.style.display = "none";
35             }
36         }
37
38         function getText(obj) {
39             var keyword = obj.value;
40             var x = obj.offsetLeft;
41             var y = obj.offsetTop;
42             while (obj = obj.offsetParent) {
43                 x += obj.offsetLeft;
44                 y += obj.offsetTop;
45             }
46
47             if (keyword != "") {
48                 var result = Autocomplete2.AjaxproDemo.GetText(keyword).value;
49                 var divText = document.getElementById("divText");
50                 if (result != "" && result!=null) {
51                     //divText.style.display = "inline";
52                     displayDiv("divText", true);
53                     divText.style.top = (parseInt(y, 10) + 21) + "px";
54                     divText.style.left = x + "px";
55                     divText.innerHTML = result;
56                 }
57                 else {
58                     displayDiv("divText", false);
59                 }
60             }
61         }
62
63         function setText(obj) {
64             displayDiv("divText", false);
65             document.getElementById("txtKeyword").value = obj.innerHTML;
66
67         }
68         function setColor(obj) {
69             obj.style.backgroundColor = "#D0E4E9";
70         }
71         function clearColor(obj) {
72             obj.style.backgroundColor = ""
73         }
74     </script>
75 </head>
76 <body>
77     <form id="form1" runat="server">
78     <input id="txtKeyword" type="text" onkeyup="getText(this)" />
79
80     
81     <div id="divText" runat="server" >
82
83     </div>
84     
85     </form>
86 </body>
87 </html>
88

后台代码：

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 //new using
8 using System.Data.Linq.SqlClient;
9 using AjaxPro;
10 using System.Text;
11
12 namespace Autocomplete2
13 {
14     /// <summary>
15     /// Ajaxpro-Autocomplete
16     /// </summary>
17     public partial class AjaxproDemo : System.Web.UI.Page
18     {
19         protected void Page_Load(object sender, EventArgs e)
20         {
21             AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxproDemo));
22         }
23
24         /// <summary>
25         ///根据关键字匹配和关键字相符的结果返回
26         /// </summary>
27         /// <param name="keyWord">关键字</param>
28         /// <returns></returns>
29         [AjaxPro.AjaxMethod()]
30         public string GetText(string keyWord)
31         {
32             List<Content> list = new List<Content>();
33             list.Add(new Content("asp.net mvc"));
34             list.Add(new Content("asp.net ajax"));
35             list.Add(new Content("asp.net 教程"));
36             list.Add(new Content("asp.net 视频教程"));
37             list.Add(new Content("asp.net 源码"));
38             list.Add(new Content("asp.net cms"));
39             list.Add(new Content("asp.net 3.5"));
40             list.Add(new Content("c# 数组"));
41             list.Add(new Content("c# 多线程"));
42             list.Add(new Content("oec2003"));
43             list.Add(new Content("oec2004"));
44             list.Add(new Content("oec2005"));
45             list.Add(new Content("oec2006"));
46             var q = list.Where(p => p.Title.StartsWith(keyWord)).Take(10);
47
48             StringBuilder sb = new StringBuilder();
49             try
50             {
51                 if (q.Count() > 0)
52                 {
53                     foreach (var t in q.ToList<Content>())
54                     {
55                         sb.Append("<div onclick=/"setText(this)/"" +
56                            "onmouseover=/"setColor(this)/" " +
57                            "onmouseout=/"clearColor(this)/" " +
58                            "style=/"cursor:pointer;width:100%/">" +
59                             t.Title + "</div>");
60                     }
61                 }
62                 return sb.ToString();
63             }
64             catch
65             {
66                 return "";
67             }
68         }
69     }
70
71     public class Content
72     {
73         public string Title { get; set; }
74
75         public Content(string title)
76         {
77             Title = title;
78         }
79     }
80 }

运行结果如下图：

注：Ajax.net有Ajaxpro.dll和Ajax.dll两个版本，这两个版本在使用时有些区别。

1 webconfig的配置不一样

Ajaxpro.dll的webconfig配置如下:

Ajax.dll的webconfig配置如下 :

2 在客户端调用后台方法时有区别

Ajax.dll在调用时直接写类名.方法名就可以，如下

var result =AjaxproDemo.GetText(keyword).value;

Ajaxpro.dll在调用时要加上命名空间，如下：

var result = Autocomplete2.AjaxproDemo.GetText(keyword).value;

示例下载