[原创推荐]基于ASP.NET Control Toolkit仿Google的AutoComplete控件
仿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页面代码如下：
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.
我们这里真正的数据应该从数据库里读取，这里演示，我们就生产字符串来测试，具体代码如下：
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来编写应该如何书写呢？我也会在近期的博文里给出答案！
