1. 程式人生 > >使用AutoCompleteExtender(自動完成下拉選單)例項

使用AutoCompleteExtender(自動完成下拉選單)例項

我正在學習使用AjaxControlToolkit,AutoCompleteExtender是我使用的第一個控制元件,有關它的文章網上也有不少,不過很多都因為版本問題而不太正確了,讓我在參考時也繞了些圈子,因此我把自己的例項寫一下,適合和我一樣的新手作參考(注:版本對應ASP.NET AJAX 1.0)
效果圖:

首先配置好環境,安裝過程參考:ASP.NET AJAX學習記要(3)-ASP.NET AJAX安裝(VS2005下安裝)
用AjaxControlToolkitWebSite模板新建網站
新建一個WebService,在內碼表中加入以下程式碼

using System.Web.Script.Services;
[ScriptService]


然後寫一個方法,用於返回自用完成時顯示的資料列表

[WebMethod]
    
publicstring[] GetList(string prefixText, int count)
    
{
        
string[] returnValue1 ="張飛""張苞""張郃""張遼" };
        
string[] returnValue2 ="劉備""劉禪""劉璋""劉表" };
        
switch (prefixText.ToLower())
        
{
            
case"":
                
return returnValue1;
            
case"zhang":
                
return returnValue1;
            
case"":
                
return returnValue2;
            
case"liu":
                
return returnValue2;
            
default:
                
returnnewstring[0];
        }

    }


其中prefixText是指定文字框內輸入的值,根據這個值來做資料篩選,本例中為了簡單就直接寫死了
返回的值必須是字串陣列,如果是從資料來源取得的表還需要把它轉成陣列後返回

然後在webform中新增控制元件,程式碼如下

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        
<asp:ScriptManager ID="ScriptManager1" runat="server">
        
</asp:ScriptManager>
        
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" MinimumPrefixLength="1" ServiceMethod="GetList" ServicePath="WebService.asmx">
        
</ajaxToolkit:AutoCompleteExtender> AutoCompleteExtender 的幾個屬性:
TargetControlID:要監視的文字控制元件ID
MinimumPrefixLength:觸發自動完成功能的最少字數
ServicePath:WebService路徑
ServiceMethod:剛才寫的方法名稱,用於返回資料

儲存後執行一下看看,自動完成功能就是這麼簡單:)