[原创推荐]基于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页面代码如下：

 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来编写应该如何书写呢？我也会在近期的博文里给出答案！

转载于:https://www.cnblogs.com/jackyzhou/archive/2009/06/06/1497416.html