Ajax中 AutoCompleteExtender 的使用方法

控制項名：AutoCompleteExtender 

作用：   在文字框輸入時，實現動態提示以及自動填寫

樣本：   在 google 進行搜尋時，在文字框會輸入提示內容，

 

Ajax實現：

如果你在用Visual Studio 2005，還沒有安裝 ASPAJAXExtender 的話，請首先安裝： 猛擊這裡下載

這裡還要下載 AjaxControlToolkit ，可以下載這裡的 dll 檔案：猛擊這裡下載 

方法1：

將 AjaxControlToolkit（.dll） 裡的所有控制項添加到 vs2005 或 vs2008 的工具列中：

添加到工具列中的方法：

     右鍵工具列選項卡：添加選項卡 ＞ 命名 ＞ 選項 ＞　瀏覽　＞　選擇dll檔案 > 確定

網頁中添加如下代碼：

<div>

<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server" AutoPostback="true">
   <ContentTemplate>
       <asp:TextBox ID="tb" runat="server" Text=""></asp:TextBox>
       <ajax:AutoCompleteExtender ID="googleSa" runat="server" ServicePath="AutoComplete.asmx"
          TargetControlID="tb" ServiceMethod="GetCompletionList">
       </ajax:AutoCompleteExtender>
   </ContentTemplate>
</asp:UpdatePanel>
</div>

 

屬性介紹： 

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

注意：

1. webservice 需要聲明為 [System.Web.Script.Service.ScriptService]

   這樣 Ajax 可以前台調用。

2. 方法的三個條件：需要嚴格遵守！
   傳回型別必需為：string []；參數類型必需為：string  ,   int；
　參數名：prefixText  ,  count。

 

WebService代碼： 

[System.Web.Script.Services.ScriptService]

publicclassAutoComplete : System.Web.Services.WebService
{
[WebMethod]
publicstring[] GetCompletionList(stringprefixText,intcount)
{
   if( count == 0 )
      count=10;
   if( prefixText.Equals("xyx") )
      return new string[0];
   List<string> items = new List<string>(count);
   Random random1 = new Random();
   for(int i=0; i<count; i++)
   {
      charc1=(char)random1.Next(65,97);
      charc2=(char)random1.Next(97,122);
      charc3=(char)random1.Next(97,122);
      items.Add(prefixText+c1+c2+c3);
   }
   returnitems.ToArray();
}
}

prefixText ：是輸入的內容，可以用來檢索資料庫，查詢出以其開頭的字串。將查詢出來的字串以 string[] 形式返回即可。