AutoCompleteExtender詳細介紹（一）

        最近在項目中使用到了AutoCompleteExtender這個控件，這個控件是微軟推出的ajaxtoolkit工具包中的一個控件，主要作用是在asp.net中幫助textbox控件自動完成輸入，實現類似百度搜索欄效果。下面介紹這個控件的基本用法。

1. 下載ajaxToolkit 工具包

        在使用這個控件之前，首先要下載ajaxToolkit 這個工具包，它是微軟發佈了一個開源工具包，裏面包含了一二十個效果很漂亮的ajax控件，可以直接使用，很方便。

        官方下載地址：http://ajax.asp.net/downloads?tabid=47

        本站下載地址：http://download.csdn.net/detail/zlwzlwzlw/6569271

        下載完成後，解壓文件，然後雙擊運行AjaxControlToolkit.sln。用vs2005打開這個sln，編譯TemplateVSI這個項目後，把在C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\SampleWebSite\Bin下面生成的AjaxControlToolkit.dll和 AjaxControlToolkit.pdb複製到C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\Binaries文件夾下面，這樣我們就可以在vs2005中使用ajax.net這些控件了。如果在vs2005的工具箱中沒有出現此控件，可以右鍵-》選擇項-》瀏覽 找到AjaxControlToolkit.dll文件，即可添加。

2. 使用AutoCompleteExtender

        AutoCompleteExtender控件需要配合textbox控件工作，所以需要在頁面上添加textbox控件。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>                                                                        // ajax管理模塊
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtProduct" runat="server" Width="180px" Height="25px" ></asp:TextBox>     // 關聯的textbox控件
<cc1:AutoCompleteExtender ID="actProduct" runat="server" 
ServicePath="SelectBaseInfo.asmx"                                                           // 關聯的web服務頁面名稱
TargetControlID="txtProduct"                                                                // 關聯的控件，只能是textbox
ServiceMethod="GetProductInfo"                                                              // web服務中提供的搜索方法名
MinimumPrefixLength="1"                                                                     // 啓動搜索的最小字數
CompletionInterval="100"                                                                    // 返回搜索結果的時間間隔
CompletionListCssClass="autocomplete_completionListElement"                                // css樣式
CompletionListItemCssClass="autocomplete_listItem" 
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" >
</cc1:AutoCompleteExtender>
</ContentTemplate>  
</asp:UpdatePanel>

        前臺工作完成後，現在需要爲AutoCompleteExtender控件添加一個web服務，以便返回自動完成的搜索選項。

        在當前項目中添加web服務，編譯器會自動生成頁面文件和後臺代碼文件。

/// <summary>
/// SelectBaseInfo 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的註釋。 
[System.Web.Script.Services.ScriptService]                                                      // 取消此句註釋
public class SelectBaseInfo : System.Web.Services.WebService
{
}

        在此文件中添加搜索方法，爲控件提供合適的返回值。搜索方法必須採用固定形式，只有兩種形式的重載：

        public string[] ServiceMethod (string prefixText, int count);
        public string[] ServiceMethod (string prefixText, int count,string contextKey);

        返回值必須是字符串數組。

        參數prefixText：搜索的條件，一般是關聯的textbox控件中輸入的內容。

        參數count：返回值數組的大小，默認爲10。

        參數contextKey：其他參數，如果搜索需要關聯其他參數，可以利用這個參數進行傳遞。

        下面是一個搜索函數的樣例：

/// <summary>
    /// 模糊查詢產品信息
    /// </summary>
    /// <param name="prefixText">模糊搜索的條件，由三部分信息組成 cid,productcode,productname</param>
    /// <param name="count"></param>
    /// <returns></returns>
    [WebMethod]
    public string[] GetProductInfo(string prefixText, int count, string contextKey)
    {
        //prefixText = "9999," + string.Empty + "," + prefixText;
        //string[] selectParamer = prefixText.Split(',');
        //if (selectParamer == null || selectParamer.Length != 3)
        //    return null;
        string[] selectParamer = new string[3];
        selectParamer[0] = contextKey;
        selectParamer[1] = string.Empty;
        selectParamer[2] = prefixText;

        ProductManageLogic lgc = new ProductManageLogic(selectParamer[0]);
        DataTable dt = lgc.GetProductInfo(selectParamer[1], selectParamer[2], string.Empty);
        if (dt == null || dt.Rows.Count <= 0)
            return null;

        string[] strResultArray = new string[dt.Rows.Count];
        for(int i =0; i < dt.Rows.Count; i++)
        {
            strResultArray[i] = dt.Rows[i]["productname"] + "," + dt.Rows[i]["productcode"] + "," + dt.Rows[i]["id"];
        }
        return strResultArray;
    }

        web服務添加完成後，即可在頁面中使用自動完成功能，效果如下：

        唯一的瑕疵是，搜索框和文本框不能完全對齊，不知道是什麼問題。