[原创推荐]基于ASP.NETControlToolkit仿Google的AutoComplete控件

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

仿Google的AutoComplete控件

作者：Jacky.zhou

时间：2009-06-06

简介

Google推出的Suggestion震惊的WEB开发界，因为他把JS的作用运用的淋漓尽致，让很多UI程序员都叹为观止，现在，基于JS的AJAX技术已经成为WEB开发界必不可少的一种技术，但AJAX并非新技术，就是把我们以前知道的几个技术进行了整合，达到了一种全新的效果，Google在这方面，真的很让人佩服，那么现在，我就在ASP.NET Contrl Toolkit下制作Google的Suggestion效果。

效果展示

制作过程

一、我们在VS2008中创建一个ASP.NET页面，命名为：AutoComplete.aspx.并搭建页面。

页面代码很简单，一个ScriptManager控件，这不用说了，ASP.NET AJAX的大脑，一个TextBox控件，一个扩展控件：AutoCompleteExtender。

AutoComplete.aspx页面代码如下：

1 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Microsoft.aspx.cs" Inherits="_Default" %>
2
3 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml">
8 <head runat="server">
9     <title></title>
10 </head>
11 <body>
12     <form id="form1" runat="server">
13     <asp:ScriptManager ID="ScriptManager1" runat="server">
14     </asp:ScriptManager>
15     <div>
16         <asp:TextBox ID="MyTextBox" runat="server"></asp:TextBox>
17         <cc1:AutoCompleteExtender ID="AutoCompleteExtender1"
18          ServicePath="~/Services/WordService.asmx"
19          ServiceMethod="GetWordList"
20          TargetControlID="MyTextBox"
21          CompletionSetCount="10"
22          MinimumPrefixLength="2"
23          runat="server">
24         </cc1:AutoCompleteExtender>
25     </div>
26     </form>
27 </body>
28 </html>

解释一下AutoCompleteExtender控件下的一些属性，ServicePath:WebService的路径，ServiceMethod:WebService方法，TargetControlID:对那个控件进行自己匹配，这里是那个文本框，CompletionSetCount:匹配项显示的条数，MinimumPrefixLengh:当输入参数长度为多少的时候开始匹配。

二、我们的数据是通过WebService进行获取的，所以，我们创建一个WebService命名为：WordService.asmx.

我们这里真正的数据应该从数据库里读取，这里演示，我们就生产字符串来测试，具体代码如下：

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Services;
6
7 /// <summary>
8 /// Summary description for WordService
9 /// </summary>
10 [WebService(Namespace = "http://tempuri.org/")]
11 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
12 // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
13 [System.Web.Script.Services.ScriptService]
14 public class WordService : System.Web.Services.WebService {
15
16     public WordService () {
17
18         //Uncomment the following line if using designed components
19         //InitializeComponent();
20     }
21
22     /// <summary>
23     ///
24     /// </summary>
25     /// <param name="prefixText">前缀文本</param>
26     /// <param name="count">显示条数</param>
27     /// <returns></returns>
28     [WebMethod]
29     public string[] GetWordList(string prefixText, int count)
30     {
31         if (prefixText.Equals("xyz"))
32         {
33             return null;
34         }
35
36         List<string> list = new List<string>();
37
38         Random ran = new Random();
39         int i=1;
40         while (i<=10)
41         {
42             char c1 = (char)ran.Next(65, 90);
43             char c2 = (char)ran.Next(97, 122);
44             char c3 = (char)ran.Next(97, 122);
45             string s =prefixText+c1 + c2 + c3;
46
47             list.Add(s);
48         }
49
50         return list.ToArray();
51     }
52
53 }
54
55

就这几行代码，我们就实现Google的那种效果，但是，有些UI上的问题，这里就不作多的讲解，如果要对Suggestion进行样式设计，在扩展控件AutoCompleteExtender中有相应的属性去设置，主要是通过CSS样式设计。

总结

其实，用ASP.NET AJAX控件去做这样的效果，很简单，只要知道控件是怎么用，那就万事俱备，但是，控件里面具体的逻辑，具体的是显示，我们就不知道了，如果想要完全了解这个效果的实现和逻辑，肯定是用全JS编写的，我相信Google同样如此，那么大家想想用纯JS来编写应该如何书写呢？我也会在近期的博文里给出答案！