AjaxToolKit学习笔记 之 AutoCompleteExtender

1.功能描述

AutoCompleteExtender控件可以辅助TextBox控件自动完成输入

2.控件属性说明

TargetControlID - 指定将被辅助完成自动输入的控件的ID，此处只能是TextBox．

ServiceMethod - 指定在WebService中的用于提取数据的方法的名称．此方法必须严格遵守下面的签名:

public string[] FindString(string prefixText, int count)
    {
        DataRow[] drs = GetTownTable(prefixText);

        string[] array = new string[drs.Length];

        for (int i = 0; i < drs.Length; i++)
        {
            array.SetValue(drs[i]["city_value"].ToString(), i);
        }

        return array;
    }

也就是说,方法名可以替换,但方法签名及类型都不能修改.

ServicePath 提供服务的WebService的路径.若不指出则表示本页面ServiceMethod对应的方法名．

MinimumPrefixLength  用来设置用户输入多少字符才会出现相应的提示信息，默认值为3..

CompletionInterval  从服务器获取数据的时间间隔.单位是毫秒，默认值为1000ms.

EnableCaching 用于指定是否提供客户端缓存数据的功能，默认为true.

CompletionListItemCssClass 自动完成的下拉列表项的CSS样式. 

CompletionListCssClass 自动完成的下拉列表的CSS样式. 

＜Animations> 指定自动完成下拉列表的显示/隐藏时的动画效果. 

3.使用实例

3.1 前端代码

<div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" CompletionInterval="300"
         CompletionSetCount="3" EnableCaching="true" MinimumPrefixLength="1" ServiceMethod="FindString" ServicePath="CityService.asmx">
        </ajaxToolkit:AutoCompleteExtender>
    </div>

3.2 WebService 中的FindString方法:

/// <summary>
    /// 构建区对应的下拉框的数据源.
    /// <remarks>
    /// 这里是手动创建了一个表格. 按实际情况,可以从数据库中取值
    /// </remarks>
    /// </summary>
    /// <returns></returns>
    public DataRow[] GetTownTable(string cityid)
    {
        DataTable dt = new DataTable();
        DataColumn dc;
        DataRow dr;

        dc = new DataColumn();
        dc.ColumnName = "city_value";
        dc.DataType = System.Type.GetType("System.String");
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "town_name";
        dc.DataType = System.Type.GetType("System.String");
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "town_value";
        dc.DataType = System.Type.GetType("System.String");
        dt.Columns.Add(dc);

        dr = dt.NewRow();
        dr["city_value"] = "guangzhou";
        dr["town_name"] = "花都";
        dr["town_value"] = "huadu";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["city_value"] = "shengzhen";
        dr["town_name"] = "南山";
        dr["town_value"] = "nanshan";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["city_value"] = "nanchang";
        dr["town_name"] = "山青山";
        dr["town_value"] = "shanqingshan";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["city_value"] = "shangrao";
        dr["town_name"] = "余干";
        dr["town_value"] = "yugan";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["city_value"] = "taiyuan";
        dr["town_name"] = "杏花区";
        dr["town_value"] = "xinhuaqu";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["city_value"] = "xingtai";
        dr["town_name"] = "会宁镇";
        dr["town_value"] = "huining";
        dt.Rows.Add(dr);

        // DataRow[] drs = dt.Select("city_value='" + cityid + "'");
        DataRow[] drs = dt.Select("city_value like '" + cityid + "%'");
        return drs;
    }

 [WebMethod]
    public string[] FindString(string prefixText, int count)
    {
        DataRow[] drs = GetTownTable(prefixText);

        string[] array = new string[drs.Length];

        for (int i = 0; i < drs.Length; i++)
        {
            array.SetValue(drs[i]["city_value"].ToString(), i);
        }

        return array;
    }

4.试验过程中碰到的问题及原因

4.1 在文本框中输入字符,并没有联想词组出现

原因:在查询方法GetTownTable中,没有使用LIKE语句, 直接使用了=.

5.总结

5.1 方法签名是严格要求的

5.2 方法要求返回的是一个string[].

6. 参考文档

http://www.asp.net/ajaxlibrary/act_AutoComplete.ashx