在ASP.NET中实现Ajax AutoComplete效果

　　用过谷歌的朋友都知道，只需要敲几个字母他就知道你要找什么。动态的自动完成使用户输入非常方便(如下图)。在ASP.NET实现这个东东相对来说要简单的多，Kim在这里写写如何在ASP.NET中实现AutoComplete Ajax效果。 

点击进入效果页面○>>>

 

　　第一步，创建web service，.net ajax control toolkit许多数据驱动的动态效果都是使用web service.注意创建web service时.asmx文件要和页面文件在同一文件夹（其实我想分开，不过试了几次没有成功，一会儿好好的Google一番看个究竟）。

 

----------------------------------------------------

//web service的源码    AutoComplete.cs

using System;
using System.Collections.Generic;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : WebService
{
    public AutoComplete()
    {
    }

    [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
    {
        if (count == 0)
        {
            count = 10;
        }

        if (prefixText.Equals("xyz"))
        {
            return new string[0];
        }

        Random random = new Random();
        List<string> items = new List<string>(count);
        for (int i = 0; i < count; i++)
        {
            char c1 = (char)random.Next(65, 90);
            char c2 = (char)random.Next(97, 122);
            char c3 = (char)random.Next(97, 122);

            items.Add(prefixText + c1 + c2 + c3);
        }

        return items.ToArray();
    }
}

 

 

----------------------------------------------------

　　这里面GetCompletionList方法负责返回自动完成需要的信息，如果需要传参可以增加ContextKey参数（详见我的上篇技术文章---使用Ajax SlideShowExtender传参的两种方法)。这里为了作为演示，该自动完成函数会返回三个随机字母后缀的补充字符串。

 

　　做好web service后在实现自动完成的页面中需要以下几个元素：

1.ScriptManager控件---做Ajax效果的必要元素

2.TextBox控件---自动完成效果的载体

3.AutoCompleteExtender---用来实现自动完成效果的扩展控件(在.net Ajax 工具包中，可在http://asp.net免费下载)

4.css样式

 

 

----------------------------------------------------

 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div align="center">
            <asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
            <ajaxToolkit:AutoCompleteExtender
                runat="server"
                BehaviorID="AutoCompleteEx"
                ID="autoComplete1"
                TargetControlID="myTextBox"
                ServicePath="AutoComplete.asmx"
                ServiceMethod="GetCompletionList"
                MinimumPrefixLength="2"
                CompletionInterval="1000"
                EnableCaching="true"
                CompletionSetCount="20"
                CompletionListCssClass="autocomplete_completionListElement"
                CompletionListItemCssClass="autocomplete_listItem"
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :"
                ShowOnlyCurrentWordInCompletionListItem="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>
            </ajaxToolkit:AutoCompleteExtender>           
            <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click"
                Text="搜索" />
            </div>

 

----------------------------------------------------

//css样式，存于独立的.css文件中然后引用到该页面↓

/* Styles for the Animation Reference */
.animationReferenceTable
{
}

.animationReferenceRow
{
}

.animationReferenceField
{
 text-align: right;
 vertical-align: top;
 padding-top: 5px;
}

.animationReferenceCode
{
 margin-top: 5px;
 vertical-align: top;
 font-family: 'Courier New', Monospace;
 font-style: normal;
 font-weight: bold;
 
 display:block;
 background-color:#FFF;
 color:#000;
 font-family:'Courier New', Monospace;
 font-size:0.9em;
 font-style:normal;
 font-weight: bold;
 margin-bottom: 5px;
}

.animationReferenceItems
{
 vertical-align: top;
}

.animationReferenceItemTable
{
 width: 100%;
 padding: 0px;
 margin: 0px;
}

.animationReferenceItemRow
{
 width: 100%;
 padding: 0px;
 margin: 0px;
}

.animationReferenceItem
{
 width: 100%;
 padding: 0px;
 margin: 0px;
 padding-bottom: 10px;
}

.animationReferenceItemCode
{
 display:block;
 background-color:#FFF;
 color:#000;
 font-family:'Courier New', Monospace;
 font-size:0.9em;
 font-style:normal;
 font-weight: bold;
}

 

/*AutoComplete flyout */

.autocomplete_completionListElement
{ 
 visibility : hidden;
 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;
}

/* AutoComplete highlighted item */

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

/* AutoComplete item */

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

 

.dynamicPopulate_Normal
{
 border:silver 1px inset;
 padding:2px;
 text-align:center;
 height:2em;
 margin:5px;
 width:200px;
}

.dynamicPopulate_Updating
{
 background-image:url(images/loading.gif);
 background-repeat:no-repeat;
 border:silver 1px inset;
 text-align:center;
 padding:2px;
 height:2em;
 margin:5px;
 width:200px;
}

 

 

 

----------------------------------------------------

　　在AutoCompleteExtender的属性中，BehaviorID指定行为脚本的Id,ServicePath和ServiceMethod指定提供自动完成下拉列表中的数据，而<Animations>结点负责指定下拉列表的动态效果。

 

　　和JSP等其他web开发比，asp.net中的开发效率要高的多，尤其是在Ajax效果上，.net已经把默认的细节存入底层，同时又开放定制化的接口，使我们的工作更加高效的同时又提供了扩展化、定制化的接口。

 

 

 

written by Kim

原创文章，转载请注明出处

http://www.bosnma.com