Atlas学习手记(25):使用行为增强用户界面(五):AutoComplete Behavior
前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。
主要内容
1.AutoComplete Behavior简介
2.完整示例
一.AutoComplete Behavior简介
前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。AutoComplete Behavior完全使用客户端脚本实现,它的基本定义形式如下:
<behaviors>
<autoComplete
completionInterval="1000|interval between drop-down updates"
completionList="HTML element used for drop-down box"
completionSetCount="10|number of values shown in drop-down list"
dataContext="source for data binding operations"
id="identifier for looking up the component by name"
minimumPrefixLength="3|minimum prefix length"
propertyChanged="event handler"
serviceMethod="name of auto completion Web service method"
serviceURL="URL of auto completion Web service"
>
<bindings>
<!-- bindings -->
</bindings>
<propertyChanged>
<!-- actions -->
</propertyChanged>
</autoComplete>
</behaviors>
</textBox>
其中它的属性解释如下(Dflying Chen):
1.serviceURL:提供自动完成功能的服务器端Web Service的路径。
2.serviceMethod:提供自动完成功能的服务器端的Web Method名称,该Web Method应该有类似的签名:public String[] GetSuggestions(string prefixText, int count)。其中prefixText为客户端传入的当前输入的字符串,count为返回的提示列表中的最大条目数,同时它应该返回一个string数组,表示提示列表。
3.minimumPrefixLength:开始提供自动完成列表的文本框内最少的输入字符数量。默认值为3。如果用户刚刚输入一两个字母,您就迫不及待的提供给他一长串的列表,这既没什么意义,也会极大浪费服务器与网络资源。只有用户输入了等于或超过某个数目(由本属性设定)时,给出的建议才是有价值的,Atlas也才会查询服务器端的相应方法并显示给用户提示列表。
4.completionInterval:每次查询后台的间隔时间,默认值是1000(毫秒)。如果该值太大,则给用户带来程序反应迟钝的印象,如果太小,则加重服务器与网络负担。一般来讲,500-2000是一个比较合理的值。
5.completionList:显示提示列表的DOM元素。如果不指定,Atlas会自动在相关的TextBox下面创建一个DIV来显示。一般情况下我们无须指定这个属性。
6.completionSetCount:提示列表中的最大项目数,默认值为10。
二.完整示例
下面看一个完整的示例,前面的两步跟AutoComplete Extender是一样的,也需要准备相关的数据和编写WebService。
1.准备相关的数据源,这里使用一个本文文件作为我们的数据源,当然你也可以从数据库中读数据,拷贝如下单词为words.txt并保存在App_Data文件夹:
2.编写Web Service用来提供单词列表,这里我们并不关心具体的实现逻辑,只关心Web Method接收什么样的参数,最后返回一个string数组即可。
using System.IO;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Threading;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Serialization;
/// <summary>
/// Summary description for AutoCompleteService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutoCompleteService : System.Web.Services.WebService {
public AutoCompleteService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
private static string[] autoCompleteWordList = null;
[WebMethod]
public String[] GetWordList(string prefixText, int count)
{
if (autoCompleteWordList == null)
{
string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/words.txt"));
Array.Sort(temp, new CaseInsensitiveComparer());
autoCompleteWordList = temp;
}
int index = Array.BinarySearch(autoCompleteWordList, prefixText,
new CaseInsensitiveComparer());
if (index < 0)
{
index = ~index;
}
int matchingCount;
for (matchingCount = 0;
matchingCount < count && index + matchingCount <
autoCompleteWordList.Length;
matchingCount++)
{
if (!autoCompleteWordList[index +
matchingCount].StartsWith(prefixText,
StringComparison.CurrentCultureIgnoreCase))
{
break;
}
}
String[] returnValue = new string[matchingCount];
if (matchingCount > 0)
{
Array.Copy(autoCompleteWordList, index, returnValue, 0,
matchingCount);
}
return returnValue;
}
}
3.添加相关的HTML控件,这里用两个,我们分别演示默认的方式和自定义Drop-Down的方式:
<h3>AutoComplete Behavior Example</h3>
默认的方式<br />
<input id="textBox1" type="text" style="width: 300px;" /><br /><br />
自定义Drop-Down<br />
<input id="textBox2" type="text" style="width: 300px;" />
</div>
<div id="list" style="opacity:0.8;filter:alpha(opacity=75); font-size:10pt; font-family:宋体">
</div>
4.编写Atlas脚本,添加两个AutoComplete Behavior,第一个不需要指定completionList,而第二个指定completionList:
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<textBox id="textBox1">
<behaviors>
<autoComplete
serviceURL="AutoCompleteService.asmx"
serviceMethod="GetWordList"
minimumPrefixLength="2"
completionSetCount="10"
completionInterval="500" />
</behaviors>
</textBox>
<textBox id="textBox2">
<behaviors>
<autoComplete
serviceURL="AutoCompleteService.asmx"
serviceMethod="GetWordList"
minimumPrefixLength="2"
completionSetCount="10"
completionList="list"
completionInterval="500" />
</behaviors>
</textBox>
</components>
</page>
</script>
编译运行后效果如下:
默认方式
自定义Drop-Down