在线智能输入建议的AutoComplete控件

2.5  在线智能输入建议的AutoComplete控件

在线智能输入建议是目前网站上一个非常流行的功能，该功能能够根据用户的输入显示一个在线提示列表。因此，用户只要输入部分关键字，就能够从在线提示列表中选择所需要的关键字。典型的效果如图2.8所示。

图2.8  在线智能输入建议效果图

如果使用ASP.NET和JavaScript技术实现在线智能输入建议这一功能，是非常复杂且比较烦琐的事情。ASP.NET AJAX Control Toolkit中的AutoComplete控件能够实现在线智能输入建议的功能。声明AutoComplete扩展器控件的语法类似如下：

<ajaxToolkit:AutoCompleteExtender

    runat="server" ID="ace"

    TargetControlID="TextBox控件"

    ServiceMethod="获取建议的方法的名称"

    ServicePath="获取建议的Web服务"

    MinimumPrefixLength="2"

    CompletionInterval="1000"

    EnableCaching="true"

    CompletionSetCount="20"

    CompletionListCssClass="提示列表的样式"

    CompletionListItemCssClass="未选择项的样式"

    CompletionListHighlightedItemCssClass="选择项的样式"

    DelimiterCharacters=";, :">

    <Animations>

        <OnShow> ... </OnShow>

        <OnHide> ... </OnHide>

    </Animations>

</ajaxToolkit:AutoCompleteExtender>

另外，AutoComplete控件包含多个常用属性，如TargetControlID、MinimumPrefixLength、ServiceMethod、ServicePath、ContextKey等。具体说明如表2.5所示。

表2.5  AutoComplete控件的常用属性及其说明

属    性	说    明
TargetControlID	使用该控件的ASP.NET服务器端控件的ID值
MinimumPrefixLength	获取建议文本的最小字符数量
CompletionInterval	获取建议文本之前等待的时间
EnableCaching	是否使用缓存
CompletionSetCount	建议文本的数量
CompletionListCssClass	建议列表的样式
CompletionListItemCssClass	未被选择的每一项建议文本的样式
CompletionListHighlightedItemCssClass	被选择的建议文本的样式
DelimiterCharacters	分隔字符集合
FirstRowSelected	指定建议文本中的第一项是否被选择
Animations	建议文本的动画
OnShow	显示建议文本时的动画
OnHide	隐藏建议文本时的动画
ServiceMethod	Web服务方法的名称
ServicePath	Web服务的路径（相对路径）
ContextKey	设置Web服务方法的prefixText参数的值
UseContextKey	指定是否使用ContextKey参数

MinimumPrefixLength属性指定一个整数值，当用户输入内容的长度大于或等于该值时，AutoComplete控件将为输入框显示在线提示列表。CompletionInterval属性设置显示在线提示列表之前等待的时间。CompletionSetCount属性指定在线提示列表一次返回建议的最大数量。

ServicePath属性指定获取在线建议的Web服务；ServiceMethod属性指定获取在线建议的Web服务中方法的名称，该方法必须满足以下代码实例中的签名。

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public string[] GetCompletionList(string prefixText, int count)

{

    ...

}

ServiceMethod属性指定的方法必须满足以下3个条件：

— 参数列表必须为“string prefixText，int count”。其中，prefixText参数的值等于ContextKey属性的值，count参数的值等于CompletionSetCount属性的值。

— 方法的返回类型必须为“string[]”，且使用“public”修饰。

— 必须为方法添加“System.Web.Script.Services.ScriptMethod”属性，使得脚本能够调用该方法。

注意：ServiceMethod属性指定的方法的名称可以随意命名，没有硬性规定。

下述实例代码创建了一个名称为AjaxService的Web服务，并在该Web服务中引入了4个新的命名空间：System.Data、System.Web.Script.Services、AjaxControlToolkit和System.IO。AjaxService Web服务定义了一个类型为string[]的静态变量autoCompleteTextList，它用来保存在线建议的内容。定义AjaxService Web服务的程序代码如下。

///引入新的命名空间

using System.Data;

using System.Web.Script.Services;

using AjaxControlToolkit;

using System.IO;

[System.Web.Script.Services.ScriptService()]   ///添加脚本服务

public class AjaxService:System.Web.Services.WebService

{

    public static string[] autoCompleteTextList = null;

    public AjaxService(){}

    ……

}

在下述程序代码中，AjaxService Web服务定义了一个名称为GetTextList的Web方法，该方法从data.txt文件（存放在AjaxTextInput应用程序的根目录下）中获取在线建议。具体实现步骤如下：

 判断prefixText和count参数是否合法。如果不合法，则中止方法。

 如果autoCompleteTextList变量的值为空，则从data.txt文件中获取数据。其中，按行方式读取data.txt文件，并保存到临时数组tempTextList中，并且对tempTextList数组进行排序。最后将排序好的内容设置为autoCompleteTextList变量的值。

 使用二叉树搜索法在autoCompleteTextList变量中搜索prefixText参数的值所在位置，并保存搜索的索引。

 如果未搜索到prefixText参数的值，则把索引设置为0。

 根据索引和count参数的值获取在线建议内容，并复制到matchResultList数组中。

 返回matchResultList数组，该数组的内容就是在线建议列表中的内容。

[System.Web.Services.WebMethod()]

[System.Web.Script.Services.ScriptMethod()]

public string[] GetTextList(string prefixText,int count)

{   ///检测参数是否为空

    if(string.IsNullOrEmpty(prefixText) == true || count <= 0) return null;

    if(autoCompleteTextList == null)

    {   ///获取data.txt文件的数据

        StreamReader reader = new StreamReader(Server.MapPath("data.txt"));

        ///按行方式读取data.txt文件的数据

        ArrayList list = new ArrayList();

        string rowString = reader.ReadLine();

        while(rowString != null)

        {   ///读取一行

            list.Add(rowString);

            rowString = reader.ReadLine();

        }

        reader.Close();

        ///将获取的内容保存到临时数组中

        string[] tempTextList = new string[list.Count];

        int i = 0;

        foreach(string s in list){tempTextList[i++] = s;}

        ///对数组进行排序

        Array.Sort(tempTextList,new CaseInsensitiveComparer());

        autoCompleteTextList = tempTextList;

    }

    ///定位二叉树搜索的起点

    int index = Array.BinarySearch(autoCompleteTextList,prefixText,

        new CaseInsensitiveComparer());

    if(index < 0)

    {   ///修正起点

        index = ~index;

    }

    ///搜索符合条件的数据

    int matchCount = 0;

    for(matchCount = 0; matchCount < count

        && matchCount + index < autoCompleteTextList.Length;

        matchCount++)

    {   ///查看开头字符串相同的项

        if(autoCompleteTextList[index + matchCount].StartsWith(prefixText,

            StringComparison.CurrentCultureIgnoreCase) == false)

        {break;}

    }

    ///处理搜索结果

    string[] matchResultList = new string[matchCount];

    if(matchCount > 0)

    {   ///复制搜索结果

        Array.Copy(autoCompleteTextList,index,matchResultList,0,

            matchCount);

    }

    return matchResultList;

}

另外，UseContextKey属性表示是否使用ContextKey属性的值。如果不使用，则需要把UseContextKey属性的值设置为false。

在下述代码实例中，AutoSuggest.aspx页面演示了为TextBox控件（ID属性的值为tbInput）添加在线智能输入建议的功能。AutoCompleteExtender控件的ID值为aceInput，该控件为tbInput控件添加在线建议。ServicePath属性的值为AjaxService.asmx，ServiceMethod属性的值为上述代码实例中创建的GetTextList方法。

<!-- AjaxTextInput/AutoSuggest.aspx页面 -->

<%@ Page Language="C#" StylesheetTheme="ASPNETAjaxWeb" %>

<head runat="server"><title>在线智能输入建议</title></head>

<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager><br />

<asp:TextBox ID="tbInput" runat="server" SkinID="tbSkin"

    Width="300px"></asp:TextBox>

<ajaxToolkit:AutoCompleteExtender ID="aceInput" runat="server"

    MinimumPrefixLength="1" ServicePath="AjaxService.asmx"

    ServiceMethod="GetTextList"

    TargetControlID="tbInput"></ajaxToolkit:AutoCompleteExtender>

上述代码实例执行之后，在输入框中输入字符“A”，此时将显示在线建议列表，如图2.9所示。

图2.9  演示在线智能输入建议的功能