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
|
要匹配的
TextBox
ID
|
|
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();
}