AjaxPro版自动完成（Autocomplete）功能实现（附示例下载）

您现在的位置：.Net中文社区>> AJAX编程>>正文内容

AjaxPro版自动完成（Autocomplete）功能实现（附示例下载）

发布时间：2009年10月05日点击数：次未知

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

1 添加对Ajaxpro的引用。

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

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

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

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

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

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxproDemo.aspx.cs"
  Inherits="Autocomplete2.AjaxproDemo" %>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
      <title>Ajaxpro-Autocomplete</title>
      <style type="text/css">
      #divText
     {
         display:none;
         position:absolute;
         z-index:100;
         width:252px;
         height:200px;
         border:1px solid #6EBDD0;
         background-color:#EEF4F7;
     }

     #txtKeyword
     {
         width:250px;
         border:1px solid #6EBDD0;
     }
     </style>

     <script type="text/javascript">

         function displayDiv(id, mode) {
             var divText = document.getElementById("divText");
             if (mode) {
                 divText.style.display = "inline";
             } else {
                 divText.style.display = "none";
             }
         }

         function getText(obj) {
             var keyword = obj.value;
             var x = obj.offsetLeft;
             var y = obj.offsetTop;
             while (obj = obj.offsetParent) {
                 x += obj.offsetLeft;
                 y += obj.offsetTop;
             }

             if (keyword != "") {
                 var result = Autocomplete2.AjaxproDemo.GetText(keyword).value;
                 var divText = document.getElementById("divText");
                 if (result != "" && result!=null) {
                     //divText.style.display = "inline";
                     displayDiv("divText", true);
                     divText.style.top = (parseInt(y, 10) + 21) + "px";
                     divText.style.left = x + "px";
                     divText.innerHTML = result;
                 }
                 else {
                     displayDiv("divText", false);
                 }
             }
         }

         function setText(obj) {
             displayDiv("divText", false);
             document.getElementById("txtKeyword").value = obj.innerHTML;

         }
         function setColor(obj) {
             obj.style.backgroundColor = "#D0E4E9";
         }
         function clearColor(obj) {
             obj.style.backgroundColor = ""
         }
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <input id="txtKeyword" type="text" onkeyup="getText(this)" />

     
     <div id="divText" runat="server" >

     </div>
     
     </form>
</body>
</html>

后台代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

//new using

using System.Data.Linq.SqlClient;

using AjaxPro;

using System.Text;

namespace Autocomplete2

{

///

/// Ajaxpro-Autocomplete

///

public partial class AjaxproDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

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

}

///

///根据关键字匹配和关键字相符的结果返回

///

/// "keyWord">关键字

///

[AjaxPro.AjaxMethod()]

public string GetText(string keyWord)

{

List list = new List();

list.Add(new Content("asp.net mvc"));

list.Add(new Content("asp.net ajax"));

list.Add(new Content("asp.net 教程"));

list.Add(new Content("asp.net 视频教程"));

list.Add(new Content("asp.net 源码"));

list.Add(new Content("asp.net cms"));

list.Add(new Content("asp.net 3.5"));

list.Add(new Content("c# 数组"));

list.Add(new Content("c# 多线程"));

list.Add(new Content("oec2003"));

list.Add(new Content("oec2004"));

list.Add(new Content("oec2005"));

list.Add(new Content("oec2006"));

var q = list.Where(p => p.Title.StartsWith(keyWord)).Take(10);

StringBuilder sb = new StringBuilder();

try

{

if (q.Count() > 0)

{

foreach (var t in q.ToList())

{

sb.Append("

"onmouseover=\"setColor(this)\" " +

"onmouseout=\"clearColor(this)\" " +

"style=\"cursor:pointer;width:100%\">" +

t.Title + "");

}

return sb.ToString();

}

catch

{

return "";

}

public class Content

{

public string Title { get; set; }

public Content(string title)

{

Title = title;

}

运行结果如下图：

注：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;

AjaxPro版自动完成（Autocomplete）功能实现（附示例下载）

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新