Ajax Control Toolkit-自动完成文本输入
AutoCompleteExtender控件与Web Service相连接。但用户输入一定的字符后,AutoCompleteExtender自动异步调用web服务,取得相关数据,然后以下拉框的形式显示再输入框的下面供用户选择。
1创建一个Web service,代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Services;
usingSystem.Data;
usingSystem.Data.SqlClient;
usingSystem.Web.Script.Services;
///<summary>
///Summary description for AutoComplete
///</summary>
[WebService(Namespace ="http://tempuri.org/")]
[WebServiceBinding(ConformsTo =WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]//由于Web服务要为Ajax框架提供服务,要允许客户端脚本直接调用,所有,为AutoCompleteExtender提供服务的类必须加上此声明
publicclassAutoComplete: System.Web.Services.WebService{
publicAutoComplete () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
publicstring[] GetCompletionList(stringprefixText)
{
//创建连接 提取特定的数据库表
stringsql ="select name from prj where name like @prefixText";
SqlDataAdapterda =newSqlDataAdapter(sql,"server=(local);Database=ajaxtest;uid=sa;pwd=sirc2008;");
da.SelectCommand.Parameters.Add("@prefixText",SqlDbType.VarChar, 50).Value = prefixText +"%";
DataTabledt =newDataTable();
da.Fill(dt);
//提取并返回查询结果
string[] items =newstring[dt.Rows.Count];//亦可用list<string> items=new list<string>();--泛型
inti = 0;
foreach(DataRowdrindt.Rows)
{
items.SetValue(dr["name"].ToString(), i);//特定位置上存入特定字符
i++;
}
returnitems;
}
}
2In Html use this
<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>
<br/>
<cc1:AutoCompleteExtenderID="AutoCompleteExtender1"runat="server"
TargetControlID="TextBox1"ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList"MinimumPrefixLength="1"CompletionInterval="100">
</cc1:AutoCompleteExtender>
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
TargetControlID---指定将被辅助完成自动输入的控件ID。
ServiceMethod---提供服务的方法;
ServicePath—提供服务的Web服务的路径;
MinimumPrefixLength—最小响应字符;
CompletionInterval---从服务器读取数据的时间间隔,单位为ms;
效果图:
Detail.lee
2008-11-15