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

最新推荐文章于 2022-07-12 17:36:22 发布

原创最新推荐文章于 2022-07-12 17:36:22 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#autocomplete #asp.net #ajax #server #border #path

本文介绍如何利用AjaxPro库实现在用户输入时提供自动补全建议的功能，并提供了详细的前后端代码示例。

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 }

运行结果如下图：