一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用

 简介:
    AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便.

 重要属性:
    1、TargetControlID:指定要实现提示功能的控件。
    2、ServicePath:WebService的路径,提取数据的方法是写在一个WebService中的。
    3、ServeiceMethod:写在WebService中的用于提取数据的方法的名字。
    4、MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果。
    5、CompletionSetCount:设置提示数据的行数。
    6、CompletionInterval:从服务器获取书的时间间隔,单位是毫秒。
示例
打开vs2005创建一个AjaxControlToolKit网站。
在网站的App_Data文件夹下添加文本文件TextFile.txt,并在其中添加数据,如下


1 oec2003
2 oec2004
3 oec2005
4 oec2006
5 oec2007

   在网站的根目录下添加一个Web服务,命名为oec2003_AutoComplete,系统自动将Web服务两个部分,设计部分oec2003_AutoComplete.asmx和代码部分oec2003_AutoComplete.cs,其中oec2003_AutoComplete.cs文件自动放入到App_Code目录下。打开oec2003_AutoComplete.cs文件,添加获取数据的方法GetCompleteList,代码如下:

 1一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用using System;
 2一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用using System.Web;
 3一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用using System.Collections;
 4一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用using System.Web.Services;
 5一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用using System.Web.Services.Protocols;
 6一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用using System.IO;
 7一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
 8一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
 9一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用/**//// <summary>
10一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用/// AutoComplete 的摘要说明
11一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用/// </summary>

12一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用[WebService(Namespace = "http://tempuri.org/")]
13一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用[System.Web.Script.Services.ScriptService]
15一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用public class AutoComplete : System.Web.Services.WebService 一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
16一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
17一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    public AutoComplete () 一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
18一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
19一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        //如果使用设计的组件,请取消注释以下行 
20一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        //InitializeComponent(); 
21一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    }

22一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
23一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    [WebMethod]
24一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    public string HelloWorld() 一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
25一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        return "Hello World";
26一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    }

27一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    /**//// <summary>
28一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    /// 获取数据的方法GetCompleteList
29一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    /// </summary>

30一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    //定义静态数组用于保存获取的数据
31一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    private static string[] autoCompleteWordList = null;
32一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    [WebMethod]
33一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    public String[] GetCompleteList(string prefixText, int count)
34一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
35一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        if (autoCompleteWordList == null)
36一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
37一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/TextFile.txt"));
38一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            Array.Sort(temp, new CaseInsensitiveComparer());
39一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            autoCompleteWordList = temp;
40一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        }

41一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
42一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        int index = Array.BinarySearch(autoCompleteWordList, prefixText, new CaseInsensitiveComparer());
43一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        if (index < 0)
44一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
45一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            index = ~index;
46一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        }

47一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
48一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        int matchingCount;
49一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        for (matchingCount = 0; matchingCount < count && index + matchingCount < autoCompleteWordList.Length; matchingCount++)
50一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
51一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            if (!autoCompleteWordList[index + matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))
52一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
53一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用                break;
54一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            }

55一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        }

56一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        String[] returnValue = new string[matchingCount];
57一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        if (matchingCount > 0)
58一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用{
59一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            Array.Copy(autoCompleteWordList, index, returnValue, 0, matchingCount);
60一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        }

61一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用        return returnValue;
62一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用    }

63一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
64一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用}

由于在上面的代码中使用了File类,所以应该添加如下代码:

一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用using System.IO;

 因为需要在客户端调用Web服务,还需要添加如下代码

一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用[System.Web.Script.Services.ScriptService]

保存Web 服务的代码
 打开根目录下默认生成的Default.aspx
在页面中拖拽一个TextBox控件和一个AutoCompleteExtender控件。
在属性窗口设置AutoCompleteExtender控件的属性,如下

一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用<ajaxToolkit:AutoCompleteExtender 
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            ID
="AutoCompleteExtender1" 
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            runat
="server" 
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            ServiceMethod
="GetCompleteList" 
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            ServicePath
="oec2003_AutoComplete.asmx" 
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            Enabled
="true" 
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            MinimumPrefixLength
="2" 
               CompletionSetCount="10"
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用            TargetControlID
="TextBox1">
一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
</ajaxToolkit:AutoCompleteExtender>

在Web服务中的count参数的值是取CompletionSetCount属性的值。
保存设计的页面,将默认页面设置为起始页,按F5运行后在文本框中输入oe,就能看到想要的结果。

代码下载

上一篇:使用outlet在SAP Spartacus中添加自定义UI


下一篇:Asp.net Mvc Framework 七 (Filter及其执行顺序)