![](http://www.cnblogs.com/images/cnblogs_com/terrylee/Atlas_11.jpg)
自动完成功能在Ajax时代已经见的很多了,像Google Suggest,很多邮箱中也都有应用。在Atlas对于自动完成功能提供了很好的支持,提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要看一下使用AutoComplete Extender来实现自动完成功能。
主要内容
1.AutoComplete Extender介绍
2.一个完整的示例
运行效果:
摘要:自动完成功能在Ajax时代已经见的很多了,像Google Suggest,很多邮箱中也都有应用。在Atlas对于自动完成功能提供了很好的支持,提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要看一下使用AutoComplete Extender来实现自动完成功能。
主要内容
1.AutoComplete Extender介绍
2.一个完整的示例
一.AutoComplete Extender介绍
自动完成功能在Ajax时代已经见的很多了,像Google Suggest,很多邮箱中也都有应用,如下图:
![](/images/cnblogs_com/terrylee/Atlas_10.JPG)
在Atlas对于自动完成功能提供了很好的支持,提供了客户端的AutoComplete Behavior和服务器端的AutoComplete Extender的支持。本文主要介绍一下使用AutoComplete Extender来实现自动完成功能。一个简单的AutoComplete Extender如下:
<atlas:AutoCompleteExtender runat="server"
![](/Images/OutliningIndicators/None.gif)
ID="autoComplete1">
![](/Images/OutliningIndicators/None.gif)
<atlas:AutoCompleteProperties TargetControlID="TextBox1"
![](/Images/OutliningIndicators/None.gif)
Enabled="True" ServicePath="AutoCompleteService.asmx"
![](/Images/OutliningIndicators/None.gif)
ServiceMethod="GetWordList"
![](/Images/OutliningIndicators/None.gif)
minimumprefixlength="1" />
![](/Images/OutliningIndicators/None.gif)
</atlas:AutoCompleteExtender>
对于AutoComplete Extender来说,它具有如下属性:
属性
|
描述
|
ServicePath
|
指定自动完成功能Web Service的路径
ServicePath="AutoCompleteService.asmx"
|
ServiceMethod
|
指定自动完成功能Web Method的名称
ServiceMethod="GetWordList"
|
DropDownPanelID
|
指定显示列表的Panel的ID,一般情况会提供一个默认的,我们无需指定
|
minimumprefixlength
|
开始提供自动完成列表的文本框内最少的输入字符数量。
minimumprefixlength="1"
|
我们需要为AutoComplete Extender控件指定一个AutoCompleteProperties子控件,它同样具有如下属性:
属性
|
描述
|
ServicePath
|
同AutoComplete Extender的ServicePath
|
ServiceMethod
|
同AutoComplete Extender的ServiceMethod
|
minimumprefixlength
|
同AutoComplete Extender的minimumprefixlength
|
Enabled
|
是否开启自动完成功能,默认值为false
Enabled="True"
|
TargetControlID
|
指定自动完成功能应用到哪个TextBox上,设置Web服务器TextBox控件的ID
TargetControlID="TextBox1"
|
下面通过一个例子来看一下具体如何使用,来自于Atlas的官方网站。
二.一个完整的示例
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/ExpandedSubBlockStart.gif)
public AutoCompleteService ()
{
![](/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)
[WebMethod]
![](/Images/OutliningIndicators/InBlock.gif)
public String[] GetWordList(string prefixText, int count)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (autoCompleteWordList == null)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.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)
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)
{
index = ~index;
}
![](/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)
{
break;
}
}
![](/Images/OutliningIndicators/InBlock.gif)
String[] returnValue = new string[matchingCount];
![](/Images/OutliningIndicators/InBlock.gif)
if (matchingCount > 0)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Array.Copy(autoCompleteWordList, index, returnValue, 0,
![](/Images/OutliningIndicators/InBlock.gif)
matchingCount);
}
![](/Images/OutliningIndicators/InBlock.gif)
return returnValue;
}
}
3.添加AutoComplete Extender,首先需要添加一个ScriptManager,再添加一个服务器端的控件和一个AutoComplete Extender,并设置相关的参数,代码如下:
<atlas:ScriptManager id="AtlasPage1" runat="server" />
![](/Images/OutliningIndicators/None.gif)
<div class="page"id="links">
![](/Images/OutliningIndicators/None.gif)
<div id="content">
![](/Images/OutliningIndicators/None.gif)
<h2>AutoComplete server control</h2>
![](/Images/OutliningIndicators/None.gif)
<asp:TextBox ID="TextBox1" runat="server" Width="220px"></asp:TextBox>
![](/Images/OutliningIndicators/None.gif)
<atlas:AutoCompleteExtender runat="server"
![](/Images/OutliningIndicators/None.gif)
ID="autoComplete1">
![](/Images/OutliningIndicators/None.gif)
<atlas:AutoCompleteProperties
![](/Images/OutliningIndicators/None.gif)
TargetControlID="TextBox1"
![](/Images/OutliningIndicators/None.gif)
Enabled="True" ServicePath="AutoCompleteService.asmx"
![](/Images/OutliningIndicators/None.gif)
ServiceMethod="GetWordList"
![](/Images/OutliningIndicators/None.gif)
minimumprefixlength="1" />
![](/Images/OutliningIndicators/None.gif)
</atlas:AutoCompleteExtender>
![](/Images/OutliningIndicators/None.gif)
</div>
![](/Images/OutliningIndicators/None.gif)
</div>
好了,到这里整个步骤就全部完成了,运行后就可以看到效果如下:
![](/images/cnblogs_com/terrylee/Atlas_11.JPG)
完整示例下载:http://terrylee.cnblogs.com/Files/Terrylee/AutoCompleteExtenderDemo.rar