• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [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(6590);
43             char c2 = (char)ran.Next(97122);
44             char c3 = (char)ran.Next(97122);
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来编写应该如何书写呢?我也会在近期的博文里给出答案!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NET配置jquery.uploadify-v2.1.4发布时间:2022-07-10
下一篇:
如何让Asp.net页面的字体大小保持不变?发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap