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