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