[编]使用AutoCompleteExtender实现文本框自动匹配

快来打我* 2021-12-23 12:15 210阅读 0赞

# 使用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：启用缓存，将之前匹配的结果缓存起来。

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

![01.gif][]

## 总结 ##

在这篇文章中，实现了当今Web页面中很常见的一个AutoComplete功能，我们首先分析了实现的过程中可能会存在的问题，随后借助Ajax Control Toolkit中的AutoCompleteExtender控件轻松地进行了实现。

感谢阅读，希望这篇文章能给你带来帮助！

转载于:https://www.cnblogs.com/JimmyZhang/archive/2008/11/05/1327711.html

[01.gif]: http://www.tracefact.net/graph/Ajax/AutoComplete/01.gif