ASP.NETAutocomplete control

分享一個Ajax autocomplete control, 

原文連接：http://forums.asp.net/t/1157595.aspx

 

首先，引入ScriptManager

<asp:ScriptManager ID="mainScriptManager" runat="server" />

Create 一個TextBox, 這裏我把它命名爲txtAutoComplete

<asp:TextBox ID="txtAutoComplete" runat="server" Width="98%" Text=''></asp:TextBox>

而後，拖入一個AutoCompleteExtender, 設置

TargetControlID="txtAutoComplete"， 將AutoComplete control 和textBox連接起來

ServicePath="AutoCompletedWebService.asmx"， 指定WebService

ServiceMethod="LoadValues", 指定方法

MinimumPrefixLength="2", 輸入多少字符時，開始執行方法，這裏指定的2個

CompletionSetCount="20"，指定最多多少個值會被列出來

UseContextKey="true"， 指定是否使用輸入做爲參數

CompletionInterval="100"， 指定Ajax post 時間

CompletionListCssClass="autocomplete_completionListElement" 設置List的樣式
CompletionListItemCssClass="autocomplete_listItem"，設置每一個ITEM的樣式
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" ， 設置高亮樣式

FirstRowSelected="true"，設置首行選中效果

EnableCaching="true" ，使用Cache

OnShow,OnHide, 設置動畫效果

<cc1:AutoCompleteExtender ID="aceMinSupplierID" runat="server" TargetControlID="txtAutoComplete" BehaviorID="AutoCompleteEx"
            ServicePath="AutoCompletedWebService.asmx" ServiceMethod="LoadValues" MinimumPrefixLength="2"
            CompletionSetCount="20" UseContextKey="true" Enabled="true" CompletionInterval="100"
            CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"
            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" FirstRowSelected="true" 
        EnableCaching="true" >
        <Animations>
                    <OnShow>
                        <Sequence>
                            <%-- Make the completion list transparent and then show it --%>
                            <OpacityAction Opacity="0" />
                            <HideAction Visible="true" />
                            
                            <%--Cache the original size of the completion list the first time
                                the animation is played and then set it to zero --%>
                            <ScriptAction Script="
                                // Cache the size and setup the initial size
                                var behavior = $find('AutoCompleteEx');
                                if (!behavior._height) {
                                    var target = behavior.get_completionList();
                                    behavior._height = target.offsetHeight - 2;
                                    target.style.height = '0px';
                                }" />
                            
                            <%-- Expand from 0px to the appropriate size while fading in --%>
                            <Parallel Duration=".4">
                                <FadeIn />
                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
                            </Parallel>
                        </Sequence>
                    </OnShow>
                    <OnHide>
                        <%-- Collapse down to 0px and fade out --%>
                        <Parallel Duration=".4">
                            <FadeOut />
                            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
                        </Parallel>
                    </OnHide>
                </Animations>
    </cc1:AutoCompleteExtender>

 

CSS樣式設計

 /*AutoComplete flyout */
        .autocomplete_completionListElement 
        {  
            margin : 0px!important;
            background-color : inherit;
            color : windowtext;
            border : buttonshadow;
            border-width : 1px;
            border-style : solid;
            cursor :default;
            overflow : auto;
            height : 200px;
            text-align : left;
            list-style-type : none;
            padding-left:0px;
        }

        /* AutoComplete highlighted item */

        .autocomplete_highlightedListItem
        {
            background-color: #ffff99;
            color: black;
            padding: 1px;
        }

        /* AutoComplete item */

        .autocomplete_listItem 
        {
            background-color : window;
            color : windowtext;
            padding : 1px;
        }

 

Web Service 代碼，Imports System.Web.ServicesImports System.Web.Services.Protocols

Imports System.ComponentModel' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. <System.Web.Script.Services.ScriptService()> _ <System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _ <System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ <ToolboxItem(False)> _ Public Class AutoCompletedWebService Inherits System.Web.Services.WebService <WebMethod()> _ Public Function HelloWorld() As String Return "Hello World" End Function <WebMethod()> <System.Web.Script.Services.ScriptMethod()> _ Public Function LoadMinSupplierID(ByVal prefixText As String, ByVal contextKey As String) As String() Dim list As New List(Of String)() list.Clear() ......
　　　　　取得數據
　　　　 ......
 Return list.ToArray() End Function End Class