使用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时，是将客户端文本框中输入的值与服务器端的数据相比较，这样就需要在服务端创建一个方法，它能够接受来自客户端文本框输入的字符串，并且针对此字符串对数据库或者其他数据源中的数据进行查找，然后将匹配的结果以字符串数组的形式返回给客户端，最后客户端将获得的结果以列表形式显示在输入文本框的下面。尽管前面的描述只有短短的几句话，但是却暗含了这样几个问题需要注意：

1. 由于每次客户端输入时都要进行一个查找和匹配的过程，因此要查找的数据源如果不大的话，应该尽量缓存在服务端内存中，而不是每次查找匹配都去访问实际的存储位置，比如说数据库。
2. 有可能用户输入的字符串会返回极大量的结果，比如30个，为了提升服务端查找的效率，也为了不在客户端显示极长的列表，可以限制返回的结果数目。
3. 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[]{
                "Baotou", 
                "Beihai", 
                "Beijing", 
                "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：启用缓存，将之前匹配的结果缓存起来。

接下来运行页面，应该可以看到这样的结果：

建议：

1.为了TextBox和自动填充显示的字体样式一样，最好把这两个放在一个div中。

2.不要把TextBox和AutoCompleteExtender放在UpdatePanel控件中，否则就不能用了。