程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> asp.net Ajax ---AutoComplete控件使用

asp.net Ajax ---AutoComplete控件使用

編輯：.NET實例教程

以前見到google和迅雷等網站在搜索文本框中輸入文字後能自動提示,感覺這種功能很炫也很實用.現在在學習ASP.Net ajax 發現AJaxControlToolKit工具包中的AutoComplete控件就能實現這種功能,而且非常簡單.
    簡介:
    AutoComplete控件就是在用戶在文本框輸入前幾個字母或是漢字的時候,該控件就能從存放數據的文或是數據庫裡將所有以這些字母開頭的數據提示給用戶,供用戶選擇,提供方便.

    重要屬性
    1、TargetControlID:指定要實現提示功能的控件。
    2、ServicePath:WebService的路徑，提取數據的方法是寫在一個WebService中的。
    3、ServeiceMethod:寫在WebService中的用於提取數據的方法的名字。
    4、MinimumPrefixLength:用來設置用戶輸入多少字母才出現提示效果。
    5、CompletionSetCount:設置提示數據的行數。
    6、CompletionInterval:從服務器獲取書的時間間隔，單位是毫秒。

    示例
打開vs2005創建一個AJaxControlToolKit網站。
在網站的App_Data文件夾下添加文本文件TextFile.txt,並在其中添加數據，如下

$False$

在網站的根目錄下添加一個Web服務，命名為oec2003_AutoComplete，系統自動將Web服務兩個部分，設計部分oec2003_AutoComplete.asmx和代碼部分oec2003_AutoComplete.cs，其中oec2003_AutoComplete.cs文件自動放入到App_Code目錄下。打開oec2003_AutoComplete.cs文件，添加獲取數據的方法GetCompleteList,代碼如下：

using System;
2using System.Web;
3using System.Collections;
4using System.Web.Services;
5using System.Web.Services.Protocols;
6using System.IO;
7
8
9/**//// <summary>
10/// AutoComplete 的摘要說明
11/// </summary>
12[WebService(Namespace = "http://tempuri.org/")]
13[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14[System.Web.Script.Services.ScriptService]
15public class AutoComplete : System.Web.Services.WebService {
16
17    public AutoComplete () {
18
19        //如果使用設計的組件，請
取消注釋以下行
20        //InitializeComponent();
21    }
22
23    [WebMethod]
24    public string HelloWorld() {
25        return "Hello World";
26    }
27    /**//// <summary>
28    /// 獲取數據的方法GetCompleteList
29    /// </summary>
30    //定義靜態數組用於保存獲取的數據
31    private static string[] autoCompleteWordList = null;
32    [WebMethod]
33    public String[] GetCompleteList(string prefixText, int count)
34    {
35        if (autoCompleteWordList == null)
36        {
37            string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/TextFile.txt"));
38            Array.Sort(temp, new CaseInsensitiveComparer());
39

autoCompleteWordList = temp;
40 }
41
42 int index = Array.BinarySearch(autoCompleteWordList, prefixText, new CaseInsensitiveComparer());

43        if (index < 0)
44        {
45            index = ~index;
46        }
47
48        int matchingCount;
49        for (matchingCount = 0; matchingCount < count && index + matchingCount < autoCompleteWordList.Length; matchingCount++)
50        {
51            if (!autoCompleteWordList[index + matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))
52            {
53                break;
54            }
55        }
56        String[] returnValue = new string[matchingCount];
57        if (matchingCount > 0)
58

        {
59            Array.Copy(autoCompleteWordList, index, returnValue, 0, matchingCount);
60        }
61        return returnValue;
62    }
63
64}
由於在上面的代碼中使用了File類，所以應該添加如下代碼：

using System.IO;
因為需要在客戶端調用Web服務，還需要添加如下代碼

[System.Web.Script.Services.ScriptService]
保存Web 服務的代碼

打開根目錄下默認生成的Default.ASPx
在頁面中拖拽一個TextBox控件和一個AutoCompleteExtender控件。
在屬性窗口設置AutoCompleteExtender控件的屬性，如下

<AJaxToolkit:AutoCompleteExtender
            ID="AutoCompleteExtender1"
            runat="server"
            ServiceMethod="GetCompleteList"
            ServicePath="oec2003_AutoComplete.asmx"
            Enabled="true"
            MinimumPrefixLength="2"
               CompletionSetCount="10"
            TargetControlID="TextBox1">
</AJaxToolkit:AutoCompleteExtender>在Web服務中的count參數的值是取CompletionSetCount屬性的值。
保存設計的頁面，將默認頁面設置為起始頁，按F5運行後在文本框中輸入oe,就能看到想要的結果。