altas(ajax)控件(四)：模糊匹配控件AutoComplete

AutoComplete控件是一个让TextBox拥有匹配功能的TextBox辅助控件。它可以在输入时给你一些提示，Google的搜索页面已经使用了类似功能。

它的效果图如下：

例子如下：

有一个名为“myTextBox”的TextBox,有一个WebService名为“AutoComplete.asmx”，当客户在TextBox输入字符时，TextBox把字符发回服务器端，并返回匹配的字符组，把他们显示在TextBox供客户选择。

这样的设计在ajax中是一个典型的应用，那么我们来看看atlas给我们提供的解决方案。

Atlas中存在一个控件AutoCompleteExtender，

在网页前端输入：

<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="4"

CompletionInterval="500"

EnableCaching="true"

CompletionSetCount="13"

CompletionListCssClass="autocomplete_completionListElement"

CompletionListItemCssClass="autocomplete_listItem"

CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

DelimiterCharacters=";, :">

<Animations>

<OnShow>

<Sequence>

<%-- Make the completion list transparent and then show it --%>

<OpacityAction Opacity="100" />

<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>

常用属性

属性名称	说明
BehaviorID	显示在TextBox下的下拉列表的ID
ID	当前控件的ID
TargetControlID	要匹配的TextBoxID
ServicePath	WebService相对路径
ServiceMethod	WebService中用来匹配的方法
MinimumPrefixLength	开始匹配的字符位数，从第几个字符开始匹配
CompletionInterval	下拉列表出现的延时
EnableCaching	是否使用缓存
CompletionSetCount	显示的下拉列表的列数
DelimiterCharacters	不需要匹配的字符集

再看中的匹配方法

WebService

///<summary>

///返回匹配字符组

///</summary>

///<param name="prefixText">用来匹配的字符</param>

///<param name="count">返回匹配字符组数</param>

///<returns></returns>

[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();

}