使用AutoCompleteExtender实现文本框自动匹配
引言
Ajax Control Toolkit 是一个丰富的控件集，可以为我们提供许多很炫也很实用的页面功能。编写一个Asp.Net Ajax控件是比较耗费精力的，不仅需要有一定的javascript脚本编写能力，还需要了解微软的Ajax Library。如果我们急需一些效果，那么可以直接使用Ajax Control Toolkit 所提供的一些功能。但是如果想要完全明白它是如何运作的，还是需要认真地学习一下如何编写一个Asp.Net Ajax控件。我个人觉得Asp.Net Ajax控件能够较好地将以前的编写的javascript特效也融合到了.Net控件中，这样既利于javascipt代码的重用，更便于日后的使用，而不是一定要在控件中使用Ajax方式与服务端进行一次通信往来。
在Ajax Control Toolkit中包含了两类控件，其中一类后缀为Extender，也就是“扩展”的意思，这类控件可以对现有Asp.Net的能力进行扩充，来实现一些更华丽的效果。这篇文章简单介绍一下Ajax Control Toolkit中的AutoCompleteExtender如何使用，顾名思义，它可以实现一个常见的效果：AutoComplete（自动匹配）。
编写WCF Service代码
在进行AutoComplete时，是将客户端文本框中输入的值与服务器端的数据相比较，这样就需要在服务端创建一个方法，它能够接受来自客户端文本框输入的字符串，并且针对此字符串对数据库或者其他数据源中的数据进行查找，然后将匹配的结果以字符串数组的形式返回给客户端，最后客户端将获得的结果以列表形式显示在输入文本框的下面。尽管前面的描述只有短短的几句话，但是却暗含了这样几个问题需要注意：
- 由于每次客户端输入时都要进行一个查找和匹配的过程，因此要查找的数据源如果不大的话，应该尽量缓存在服务端内存中，而不是每次查找匹配都去访问实际的存储位置，比如说数据库。
- 有可能用户输入的字符串会返回极大量的结果，比如30个，为了提升服务端查找的效率，也为了不在客户端显示极长的列表，可以限制返回的结果数目。
- AutoComplete是为了根据用户输入的字符判断用户的意图，然后返回可能的结果。如果用户只输入一个字符，比如a，就开始进行查找匹配，对于用户来说意义不大，而且也会加重服务端负担，因为此时往往会返回极长的列表。
了解了上面3个问题，我们现在在站点下创建一个Ajax-Enabled WCF Service，起名为AutoCompleteService，然后在App_Code中修改AutoCompleteService.cs：
// 上面的特性省略
public class AutoCompleteService
{
private static string[] cityArray; // 将数据值缓存在静态字段中
public string[] getListFromDatabase() {
if (cityArray != null && cityArray.Length > 0)
return cityArray;
// 这里通常是由数据库获取
cityArray = new string[]{
"
"Beihai",
"
"Boao",
// ...省略若干
};
return cityArray;
}
[OperationContract]
public string[] GetCityList(string prefixText, int count) {
string[] cityArray = getListFromDatabase();
List<string> findCity = new List<string>(count);
int i = 0; int j = 0;
while (i < cityArray.Length && j < count) {
string pre = cityArray[i].Substring(0, prefixText.Length).ToLower();
if (pre.Equals(prefixText.ToLower())) {
findCity.Add(cityArray[i]);
j++;
}
i++;
}
return findCity.ToArray();
}
}
这里我们使用一个静态字段缓存了数据源中的结果，以符合上面所说的第1条。接下来我们看一下GetCityList()方法，它接受两个参数：prefixText，代表客户端文本框中已经输入的值；而count表示返回的结果数目。第2个参数体现了我们前面所说的第2点。方法的实现没有什么好说的，无非是遍历集合，返回与prefixText相匹配的结果。这里要特别说明的是：因为这个方法要与aspx页面上的AutoCompleteExtender控件协作，所以方法的签名必须为：public string[] XXXXX(string prefixText, int count)，其中XXXX代表任意合法的方法名称，但是参数的类型和名称则必须完全一致。
Web页面实现
Web页面的实现就更为简单了，因为我们使用Ajax Control Toolkit中的现成控件，所以不需要自己编码，只需要对控件的属性进行设置一下就可以了。因为我们要使用Web服务，所以需要首先在ScriptManager中对服务进行一下注册：
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/AutoCompleteService.svc" />
</Services>
</asp:ScriptManager>
接着我们在页面拖放一个Asp.Net Textbox控件，以及一个AutoCompleteExtender控件，并向下面这样对AutoCompleteExtender控件设置属性：
输入城市(拼音)
<span id="autoBox">
<asp:TextBox ID="TextBox1" runat="server" Width="160"></asp:TextBox>
</span>
<br /><br />
<ajaxControlToolkit:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
ServicePath="AutoCompleteService.svc"
ServiceMethod="GetCityList"
MinimumPrefixLength="2"
CompletionSetCount="10"
EnableCaching="true"
TargetControlID="TextBox1"
>
</ajaxControlToolkit:AutoCompleteExtender>
TextBox和通常的没有任何区别，所以我们只要看下AutoCompleteExtender就可以了。我们设置了这样几个属性：
- TargetControlID：因为它是一个Extender扩展控件，相当于是扩展了现有控件的功能，所以这个TargetControlID说明了它要对哪个控件进行扩展，此处为TextBox1。
- ServicePath：指明了要使用的服务，注意这里只需写名称，而无需指定全路径。
- ServiceMethod：服务的方法名称，即是上面所指定的GetCityList。
- MinimumPrefixLength：当文本框中输入的字符串小于这个长度时，不进行匹配，可以看到，这个可以满足我们一开始所说到的第3条。
- CompletionSetCount：返回的最大的匹配数，也就是GetCityList的count参数的值。
- EnableCaching：启用缓存，将之前匹配的结果缓存起来。
接下来运行页面，应该可以看到这样的结果：
总结
在这篇文章中，实现了当今Web页面中很常见的一个AutoComplete功能，我们首先分析了实现的过程中可能会存在的问题，随后借助Ajax Control Toolkit中的AutoCompleteExtender控件轻松地进行了实现。
感谢阅读，希望这篇文章能给你带来帮助！