AutoCompleteExtender详细介绍（一）

最新推荐文章于 2019-07-06 02:14:45 发布

zlwzlwzlw

最新推荐文章于 2019-07-06 02:14:45 发布

阅读量8.4k

点赞数 1

分类专栏： .Net

本文链接：https://blog.csdn.net/zlwzlwzlw/article/details/16342387

版权

.Net 专栏收录该内容

71 篇文章

订阅专栏

最近在项目中使用到了AutoCompleteExtender这个控件，这个控件是微软推出的ajaxtoolkit工具包中的一个控件，主要作用是在asp.net中帮助textbox控件自动完成输入，实现类似百度搜索栏效果。下面介绍这个控件的基本用法。

1. 下载ajaxToolkit 工具包

在使用这个控件之前，首先要下载ajaxToolkit 这个工具包，它是微软发布了一个开源工具包，里面包含了一二十个效果很漂亮的ajax控件，可以直接使用，很方便。

官方下载地址：http://ajax.asp.net/downloads?tabid=47

本站下载地址：http://download.csdn.net/detail/zlwzlwzlw/6569271

下载完成后，解压文件，然后双击运行AjaxControlToolkit.sln。用vs2005打开这个sln，编译TemplateVSI这个项目后，把在C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\SampleWebSite\Bin下面生成的AjaxControlToolkit.dll和 AjaxControlToolkit.pdb复制到C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\Binaries文件夹下面，这样我们就可以在vs2005中使用ajax.net这些控件了。如果在vs2005的工具箱中没有出现此控件，可以右键-》选择项-》浏览找到AjaxControlToolkit.dll文件，即可添加。

2. 使用AutoCompleteExtender

AutoCompleteExtender控件需要配合textbox控件工作，所以需要在页面上添加textbox控件。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>                                                                        // ajax管理模块
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtProduct" runat="server" Width="180px" Height="25px" ></asp:TextBox>     // 关联的textbox控件
<cc1:AutoCompleteExtender ID="actProduct" runat="server" 
ServicePath="SelectBaseInfo.asmx"                                                           // 关联的web服务页面名称
TargetControlID="txtProduct"                                                                // 关联的控件，只能是textbox
ServiceMethod="GetProductInfo"                                                              // web服务中提供的搜索方法名
MinimumPrefixLength="1"                                                                     // 启动搜索的最小字数
CompletionInterval="100"                                                                    // 返回搜索结果的时间间隔
CompletionListCssClass="autocomplete_completionListElement"                                // css样式
CompletionListItemCssClass="autocomplete_listItem" 
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" >
</cc1:AutoCompleteExtender>
</ContentTemplate>  
</asp:UpdatePanel>

前台工作完成后，现在需要为AutoCompleteExtender控件添加一个web服务，以便返回自动完成的搜索选项。

在当前项目中添加web服务，编译器会自动生成页面文件和后台代码文件。

/// <summary>
/// SelectBaseInfo 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
[System.Web.Script.Services.ScriptService]                                                      // 取消此句注释
public class SelectBaseInfo : System.Web.Services.WebService
{
}

在此文件中添加搜索方法，为控件提供合适的返回值。搜索方法必须采用固定形式，只有两种形式的重载：

public string[] ServiceMethod (string prefixText, int count);
public string[] ServiceMethod (string prefixText, int count,string contextKey);

返回值必须是字符串数组。

参数prefixText：搜索的条件，一般是关联的textbox控件中输入的内容。

参数count：返回值数组的大小，默认为10。

参数contextKey：其他参数，如果搜索需要关联其他参数，可以利用这个参数进行传递。

下面是一个搜索函数的样例：

/// <summary>
    /// 模糊查询产品信息
    /// </summary>
    /// <param name="prefixText">模糊搜索的条件，由三部分信息组成 cid,productcode,productname</param>
    /// <param name="count"></param>
    /// <returns></returns>
    [WebMethod]
    public string[] GetProductInfo(string prefixText, int count, string contextKey)
    {
        //prefixText = "9999," + string.Empty + "," + prefixText;
        //string[] selectParamer = prefixText.Split(',');
        //if (selectParamer == null || selectParamer.Length != 3)
        //    return null;
        string[] selectParamer = new string[3];
        selectParamer[0] = contextKey;
        selectParamer[1] = string.Empty;
        selectParamer[2] = prefixText;

        ProductManageLogic lgc = new ProductManageLogic(selectParamer[0]);
        DataTable dt = lgc.GetProductInfo(selectParamer[1], selectParamer[2], string.Empty);
        if (dt == null || dt.Rows.Count <= 0)
            return null;

        string[] strResultArray = new string[dt.Rows.Count];
        for(int i =0; i < dt.Rows.Count; i++)
        {
            strResultArray[i] = dt.Rows[i]["productname"] + "," + dt.Rows[i]["productcode"] + "," + dt.Rows[i]["id"];
        }
        return strResultArray;
    }

web服务添加完成后，即可在页面中使用自动完成功能，效果如下：

唯一的瑕疵是，搜索框和文本框不能完全对齐，不知道是什么问题。