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

巴特西

ASP.NETAutocomplete control

最新文章

热门文章