AJAX實現百度Google搜尋自動填滿

         這篇部落格做一個用AJAX實現百度Google搜尋自動填滿。大家在上網搜尋資料的時候，搜尋引擎都為我們顯示出了人性化的自動提示功能，滿足使用者需求的同時也極大的方便了客戶的操作，可謂是一箭雙鵰。現在的AJAX這種用戶端和伺服器互動編程技術可以說是應用及其的廣泛，幾乎大家每天上午都在和AJAX打交道。它讓web應用程式顯示出了C/S諸多好處，AJAX 在瀏覽器與 Web 服務器之間使用非同步資料轉送（HTTP 要求），用戶端與伺服器進行互動在不需要全部更新整個頁面的時候基本都使的是AJAX技術。

       下面我們具體的說說百度Google是怎樣自動填滿的。它主要使用的有：

1.    一個文字框，用來輸入資料

2.     AJAX Tool Kit中的一個控制項AutoCompleteExtender，用來讓文字框和資料來源建立關係（AJAX Tool Kit需要大家去網上下載，將下載下來的dll檔案添加到VS當中）

3.    一個用於擷取資料庫資料的檔案 ，這個檔案的類型沒有限制，可以是Webservice（.asmx）和WCF（.svc）和一般處理常式（.ashx）檔案，或者普通的C#類檔案和文字檔也可以。我們在例子當中使用的是webservice

 

下面我們開始這個例子的製作過程：

一、建立部門的資料庫，並在部門表（TDepartment）中添加資料

二、在aspx頁面中添加控制項（TextBox、ScriptManager、AutoCompleteExtender）並設定控制項的屬性，HTML代碼如下所示：

 

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>        <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>        <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"            TargetControlID="TextBox1"            MinimumPrefixLength="1"             ServiceMethod="GetDeptName"             ServicePath="WebService1.asmx">        </cc1:AutoCompleteExtender>

 

AutoCompleteExtender控制項的屬性：
　　　１．TargetControlID：指定將被輔助完成自動輸入的控制項ID，這裡的控制項只能是TextBox；
　　　２．ServicePath：指出提供服務的WEB服務路徑，若不指出則ServiceMethod表示本頁面對應的方法名；
　　　３．ServiceMethod：指出提供服務的方法名；
　　　４．MinimumPrefixLength：指出開始提供提示服務時，TextBox控制項應有的最小字元數，預設為3；
　　　５．CompletionSetCount：顯示的條數，預設為10；
　　　６．EnableCaching：是否在用戶端快取資料，預設為true；
　　　７．CompletionInterval：從伺服器讀取資料的時間間隔，預設為1000，單位：毫秒。

 

三、WebService1.asmx檔案中函數GetDeptName的添加：

 

[WebMethod]        public static string[] GetDeptName(stringprefixText)        {            List<string> suggestions = newList<string>();            try            {                 SqlConnectioncon = new SqlConnection("server=.;Initial Catalog=department;UserID=sa;Password=123456");                SqlCommandcmd = new SqlCommand();                //模糊查詢使用“%”                cmd.CommandText = "SELECT depName FROM TDepartment where depName like'" + prefixText + "%'";                cmd.Connection = con;                con.Open();                SqlDataReadersdr = null;                sdr = cmd.ExecuteReader();                while(sdr.Read())                {                   suggestions.Add(sdr.GetSqlString(0).Value);                }                 returnsuggestions.ToArray();            }             catch(System.Exception ex)            {                suggestions.Add(ex.Message);                returnsuggestions.ToArray();            }          }

    到此為止我們的工作都已經完成了，效果拭目以待，大家試試看吧！

      下載代碼