Atlas学习手记（25）：使用行为增强用户界面（五）：AutoComplete Behavior

---

本文示例源代码或素材下载

　　主要内容

　　1．AutoComplete Behavior简介

　　2．完整示例

　　一．AutoComplete Behavior简介

　　前面说过使用服务端的AutoComplete Extender，本文看一下如何使用AutoComplete Behavior来实现自动完成功能。AutoComplete Behavior完全使用客户端脚本实现，它的基本定义形式如下：

<textBox>
　　<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;
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的方式：

<div>
<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; ">
</div>

　　4．编写Atlas脚本，添加两个AutoComplete Behavior，第一个不需要指定completionList，而第二个指定completionList：

<script type="text/xml-script">
　　<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

本文作者:

---

« 
» 

---