前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。
主要内容
1.AutoComplete Behavior简介
2.完整示例
前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。
主要内容
1.AutoComplete Behavior简介
2.完整示例
一.AutoComplete Behavior简介
前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。AutoComplete Behavior完全使用客户端脚本实现,它的基本定义形式如下:
<textBox>
![](/Images/OutliningIndicators/None.gif)
<behaviors>
![](/Images/OutliningIndicators/None.gif)
<autoComplete
![](/Images/OutliningIndicators/None.gif)
completionInterval="1000|interval between drop-down updates"
![](/Images/OutliningIndicators/None.gif)
completionList="HTML element used for drop-down box"
![](/Images/OutliningIndicators/None.gif)
completionSetCount="10|number of values shown in drop-down list"
![](/Images/OutliningIndicators/None.gif)
dataContext="source for data binding operations"
![](/Images/OutliningIndicators/None.gif)
id="identifier for looking up the component by name"
![](/Images/OutliningIndicators/None.gif)
minimumPrefixLength="3|minimum prefix length"
![](/Images/OutliningIndicators/None.gif)
propertyChanged="event handler"
![](/Images/OutliningIndicators/None.gif)
serviceMethod="name of auto completion Web service method"
![](/Images/OutliningIndicators/None.gif)
serviceURL="URL of auto completion Web service"
![](/Images/OutliningIndicators/None.gif)
>
![](/Images/OutliningIndicators/None.gif)
<bindings>
![](/Images/OutliningIndicators/None.gif)
<!-- bindings -->
![](/Images/OutliningIndicators/None.gif)
</bindings>
![](/Images/OutliningIndicators/None.gif)
<propertyChanged>
![](/Images/OutliningIndicators/None.gif)
<!-- actions -->
![](/Images/OutliningIndicators/None.gif)
</propertyChanged>
![](/Images/OutliningIndicators/None.gif)
</autoComplete>
![](/Images/OutliningIndicators/None.gif)
</behaviors>
![](/Images/OutliningIndicators/None.gif)
</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文件夹:
![](/Images/OutliningIndicators/ContractedBlock.gif)
单词库
access control list (ACL)
![](/Images/OutliningIndicators/None.gif)
ADO.NET
![](/Images/OutliningIndicators/None.gif)
aggregate event
![](/Images/OutliningIndicators/None.gif)
alpha channel
![](/Images/OutliningIndicators/None.gif)
anchoring
![](/Images/OutliningIndicators/None.gif)
antialiasing
![](/Images/OutliningIndicators/None.gif)
application base
![](/Images/OutliningIndicators/None.gif)
application domain (AppDomain)
![](/Images/OutliningIndicators/None.gif)
application manifest
![](/Images/OutliningIndicators/None.gif)
application state
![](/Images/OutliningIndicators/None.gif)
ASP.NET
![](/Images/OutliningIndicators/None.gif)
ASP.NET application services database
![](/Images/OutliningIndicators/None.gif)
ASP.NET mobile controls
![](/Images/OutliningIndicators/None.gif)
ASP.NET mobile Web Forms
![](/Images/OutliningIndicators/None.gif)
ASP.NET page
![](/Images/OutliningIndicators/None.gif)
ASP.NET server control
![](/Images/OutliningIndicators/None.gif)
ASP.NET Web application
![](/Images/OutliningIndicators/None.gif)
assembly
![](/Images/OutliningIndicators/None.gif)
assembly cache
![](/Images/OutliningIndicators/None.gif)
assembly manifest
![](/Images/OutliningIndicators/None.gif)
assembly metadata
![](/Images/OutliningIndicators/None.gif)
assertion (Assert)
![](/Images/OutliningIndicators/None.gif)
association class
![](/Images/OutliningIndicators/None.gif)
ASSOCIATORS OF
![](/Images/OutliningIndicators/None.gif)
asynchronous method
![](/Images/OutliningIndicators/None.gif)
attribute
![](/Images/OutliningIndicators/None.gif)
authentication
![](/Images/OutliningIndicators/None.gif)
authorization
![](/Images/OutliningIndicators/None.gif)
autopostback
![](/Images/OutliningIndicators/None.gif)
bounds
![](/Images/OutliningIndicators/None.gif)
boxing
![](/Images/OutliningIndicators/None.gif)
C#
![](/Images/OutliningIndicators/None.gif)
card
![](/Images/OutliningIndicators/None.gif)
catalog
![](/Images/OutliningIndicators/None.gif)
CCW
![](/Images/OutliningIndicators/None.gif)
chevron
![](/Images/OutliningIndicators/None.gif)
chrome
![](/Images/OutliningIndicators/None.gif)
cHTML
![](/Images/OutliningIndicators/None.gif)
CIM
![](/Images/OutliningIndicators/None.gif)
CIM Object Manager
![](/Images/OutliningIndicators/None.gif)
CIM schema
![](/Images/OutliningIndicators/None.gif)
class
![](/Images/OutliningIndicators/None.gif)
client area
![](/Images/OutliningIndicators/None.gif)
client coordinates
![](/Images/OutliningIndicators/None.gif)
clip
![](/Images/OutliningIndicators/None.gif)
closed generic type
![](/Images/OutliningIndicators/None.gif)
CLR
![](/Images/OutliningIndicators/None.gif)
CLS
![](/Images/OutliningIndicators/None.gif)
CLS-compliant
![](/Images/OutliningIndicators/None.gif)
code access security
![](/Images/OutliningIndicators/None.gif)
code-behind class
![](/Images/OutliningIndicators/None.gif)
code-behind file
![](/Images/OutliningIndicators/None.gif)
code-behind page
![](/Images/OutliningIndicators/None.gif)
COM callable wrapper (CCW)
![](/Images/OutliningIndicators/None.gif)
COM interop
![](/Images/OutliningIndicators/None.gif)
Common Information Model (CIM)
![](/Images/OutliningIndicators/None.gif)
common language runtime
![](/Images/OutliningIndicators/None.gif)
common language runtime host
![](/Images/OutliningIndicators/None.gif)
Common Language Specification (CLS)
![](/Images/OutliningIndicators/None.gif)
common object file format (COFF)
![](/Images/OutliningIndicators/None.gif)
common type system (CTS)
![](/Images/OutliningIndicators/None.gif)
comparison evaluator
![](/Images/OutliningIndicators/None.gif)
composite control
![](/Images/OutliningIndicators/None.gif)
configuration file
![](/Images/OutliningIndicators/None.gif)
connection
![](/Images/OutliningIndicators/None.gif)
connection point
![](/Images/OutliningIndicators/None.gif)
constraint
![](/Images/OutliningIndicators/None.gif)
constructed generic type
![](/Images/OutliningIndicators/None.gif)
constructed type
![](/Images/OutliningIndicators/None.gif)
consumer
![](/Images/OutliningIndicators/None.gif)
container
![](/Images/OutliningIndicators/None.gif)
container control
![](/Images/OutliningIndicators/None.gif)
content page
![](/Images/OutliningIndicators/None.gif)
context
![](/Images/OutliningIndicators/None.gif)
context property
![](/Images/OutliningIndicators/None.gif)
contract
![](/Images/OutliningIndicators/None.gif)
control state
![](/Images/OutliningIndicators/None.gif)
cross-page posting
![](/Images/OutliningIndicators/None.gif)
CTS
![](/Images/OutliningIndicators/None.gif)
custom attribute (Attribute)
![](/Images/OutliningIndicators/None.gif)
custom control
2.编写Web Service用来提供单词列表,这里我们并不关心具体的实现逻辑,只关心Web Method接收什么样的参数,最后返回一个string数组即可。
using System;
![](/Images/OutliningIndicators/None.gif)
using System.IO;
![](/Images/OutliningIndicators/None.gif)
using System.Web;
![](/Images/OutliningIndicators/None.gif)
using System.Collections;
![](/Images/OutliningIndicators/None.gif)
using System.Collections.Generic;
![](/Images/OutliningIndicators/None.gif)
using System.Threading;
![](/Images/OutliningIndicators/None.gif)
using System.Web.Services;
![](/Images/OutliningIndicators/None.gif)
using System.Web.Services.Protocols;
![](/Images/OutliningIndicators/None.gif)
using System.Xml.Serialization;
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//// <summary>
![](/Images/OutliningIndicators/InBlock.gif)
/// Summary description for AutoCompleteService
![](/Images/OutliningIndicators/InBlock.gif)
/// </summary>![](/Images/OutliningIndicators/None.gif)
[WebService(Namespace = "http://tempuri.org/")]
![](/Images/OutliningIndicators/None.gif)
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
public class AutoCompleteService : System.Web.Services.WebService
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
public AutoCompleteService ()
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
//Uncomment the following line if using designed components
![](/Images/OutliningIndicators/InBlock.gif)
//InitializeComponent();
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/InBlock.gif)
private static string[] autoCompleteWordList = null;
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
[WebMethod]
![](/Images/OutliningIndicators/InBlock.gif)
public String[] GetWordList(string prefixText, int count)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
if (autoCompleteWordList == null)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/words.txt"));
![](/Images/OutliningIndicators/InBlock.gif)
Array.Sort(temp, new CaseInsensitiveComparer());
![](/Images/OutliningIndicators/InBlock.gif)
autoCompleteWordList = temp;
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/InBlock.gif)
int index = Array.BinarySearch(autoCompleteWordList, prefixText,
![](/Images/OutliningIndicators/InBlock.gif)
new CaseInsensitiveComparer());
![](/Images/OutliningIndicators/InBlock.gif)
if (index < 0)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
index = ~index;
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/InBlock.gif)
int matchingCount;
![](/Images/OutliningIndicators/InBlock.gif)
for (matchingCount = 0;
![](/Images/OutliningIndicators/InBlock.gif)
matchingCount < count && index + matchingCount <
![](/Images/OutliningIndicators/InBlock.gif)
autoCompleteWordList.Length;
![](/Images/OutliningIndicators/InBlock.gif)
matchingCount++)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
if (!autoCompleteWordList[index +
![](/Images/OutliningIndicators/InBlock.gif)
matchingCount].StartsWith(prefixText,
![](/Images/OutliningIndicators/InBlock.gif)
StringComparison.CurrentCultureIgnoreCase))
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
break;
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/InBlock.gif)
String[] returnValue = new string[matchingCount];
![](/Images/OutliningIndicators/InBlock.gif)
if (matchingCount > 0)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/InBlock.gif)
Array.Copy(autoCompleteWordList, index, returnValue, 0,
![](/Images/OutliningIndicators/InBlock.gif)
matchingCount);
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/InBlock.gif)
return returnValue;
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/InBlock.gif)
}
3.添加相关的HTML控件,这里用两个,我们分别演示默认的方式和自定义Drop-Down的方式:
<div>
![](/Images/OutliningIndicators/None.gif)
<h3>AutoComplete Behavior Example</h3>
![](/Images/OutliningIndicators/None.gif)
默认的方式<br />
![](/Images/OutliningIndicators/None.gif)
<input id="textBox1" type="text" style="width: 300px;" /><br /><br />
![](/Images/OutliningIndicators/None.gif)
自定义Drop-Down<br />
![](/Images/OutliningIndicators/None.gif)
<input id="textBox2" type="text" style="width: 300px;" />
![](/Images/OutliningIndicators/None.gif)
</div>
![](/Images/OutliningIndicators/None.gif)
<div id="list" style="opacity:0.8;filter:alpha(opacity=75); font-size:10pt; font-family:宋体">
![](/Images/OutliningIndicators/None.gif)
</div>
4.编写Atlas脚本,添加两个AutoComplete Behavior,第一个不需要指定completionList,而第二个指定completionList:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/xml-script">![](/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
![](/Images/OutliningIndicators/InBlock.gif)
<components>
![](/Images/OutliningIndicators/InBlock.gif)
<textBox id="textBox1">
![](/Images/OutliningIndicators/InBlock.gif)
<behaviors>
![](/Images/OutliningIndicators/InBlock.gif)
<autoComplete
![](/Images/OutliningIndicators/InBlock.gif)
serviceURL="AutoCompleteService.asmx"
![](/Images/OutliningIndicators/InBlock.gif)
serviceMethod="GetWordList"
![](/Images/OutliningIndicators/InBlock.gif)
minimumPrefixLength="2"
![](/Images/OutliningIndicators/InBlock.gif)
completionSetCount="10"
![](/Images/OutliningIndicators/InBlock.gif)
completionInterval="500" />
![](/Images/OutliningIndicators/InBlock.gif)
</behaviors>
![](/Images/OutliningIndicators/InBlock.gif)
</textBox>
![](/Images/OutliningIndicators/InBlock.gif)
<textBox id="textBox2">
![](/Images/OutliningIndicators/InBlock.gif)
<behaviors>
![](/Images/OutliningIndicators/InBlock.gif)
<autoComplete
![](/Images/OutliningIndicators/InBlock.gif)
serviceURL="AutoCompleteService.asmx"
![](/Images/OutliningIndicators/InBlock.gif)
serviceMethod="GetWordList"
![](/Images/OutliningIndicators/InBlock.gif)
minimumPrefixLength="2"
![](/Images/OutliningIndicators/InBlock.gif)
completionSetCount="10"
![](/Images/OutliningIndicators/InBlock.gif)
completionList="list"
![](/Images/OutliningIndicators/InBlock.gif)
completionInterval="500" />
![](/Images/OutliningIndicators/InBlock.gif)
</behaviors>
![](/Images/OutliningIndicators/InBlock.gif)
</textBox>
![](/Images/OutliningIndicators/InBlock.gif)
</components>
![](/Images/OutliningIndicators/InBlock.gif)
</page>
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
</script>
编译运行后效果如下:
默认方式
![](/images/cnblogs_com/terrylee/Atlas_062.gif)
自定义Drop-Down
![](/images/cnblogs_com/terrylee/Atlas_063.gif)
完整示例下载:https://files.cnblogs.com/Terrylee/AutoCompleteBehaviorDemo.rar