AutoCompleteExtender的使用

autocompleteextender 自动完成扩展,配合TextBox使用功能类似现在google中输入搜索字,则在TextBox下出来下拉框显示搜索目标中的项目
这个扩展控件需要配合Web Service使用,所以涉及了点web Service的使用(这里只简单谈下,等用熟了再仔细谈下web service的内容)
先介绍下autocompleteextender的几个关键属性：
a,TargetControlID 这个属性是所有AjaxControlToolkit的共同属性,就是扩展目标控件ID(官方这么说的吧)
b.CompletionSetCount 这个属性是设置显示下拉结果的条数默认为10吧
c.MinimumPrefixTextLength 这个属性是设置输入几个字符的长度后调用webService中的方法显示下拉列表
d.ServicePath 这个属性设置需要调用的web Service路径
e.ServiceMethod 这个属性设置需要调用的web Service中的方法(函数)
f.EnableCaching：是否在客户端缓存数据,默认为true
g.CompletionInterval：从服务器读取数据的时间间隔,默认为1000,单位：毫秒
注：如果习惯用可视控件设置属性,则a属性在autocompleteextender中设置,其他属性则设置了TargetControlId后,在相应的TargetControl中会多出来个Extenders属性中设置,如果习惯手写代码,则在autocompleteextender 代码属性中设置。
例子: 1.新建一个页面,加入ScriptManager控件一个TextBox控件一个 autocompleteextender控件
2.新建立一个webService,添加一个[WebMethod]方法
[WebMethod] public string[] GetString(string prefixText,int count){ Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Collections.Generic.List<string> list = new Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Collections.Generic.List<string>(count); Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Data.DataSet ds = new Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Data.DataSet(); //这里是我在<a href="/tag/shujuku/" target="_blank" class="keywords">数据库</a>中取数据的<a href="/tag/daima/" target="_blank" class="keywords">代码</a> 其中<a href="/tag/sql/" target="_blank" class="keywords">sql</a>Helper类是项目中的取数据基类 //string str<a href="/tag/sql/" target="_blank" class="keywords">sql</a> = string.Format("SELECT TOP {0} NAME FROM CengWei WHERE NAME LIKE '{1}%' ORDER BY NAME",count,prefixText); //ds = <a href="/tag/sql/" target="_blank" class="keywords">sql</a>Helper.Query(str<a href="/tag/sql/" target="_blank" class="keywords">sql</a>); //for (int i = 0; i < ds.Tables[0].Rows.Count; i++) //{ // list.Add(ds.Tables[0].Rows[i][0].ToString()); //} for (int i = 0; i < count; i++) { list.Add(prefixText+i.ToString()); } return list.ToArray(); }

其中：必须在webService的类上面添加
[System.Web.Script.Services.ScriptService]
示例代码：webService是在数据库中的一个字段中取数据
页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %> <%@ Register Assembly="CrystalDecisions.Web,Version=10.2.3600.0,Culture=neutral,PublicKeyToken=692fbea5521e1304" Namespace="CrystalDecisions.Web" TagPrefix="CR" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DropDownExtender简单练习</title> <link href="/aspnet_client/Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css" mce_href="aspnet_client/Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization="True"> </asp:ScriptManager> <asp:Text<a href="/tag/Box/" target="_blank" class="keywords">Box</a> ID="Text<a href="/tag/Box/" target="_blank" class="keywords">Box</a>3" runat="server"></asp:Text<a href="/tag/Box/" target="_blank" class="keywords">Box</a>> <asp:Text<a href="/tag/Box/" target="_blank" class="keywords">Box</a> ID="Text<a href="/tag/Box/" target="_blank" class="keywords">Box</a>4" runat="server"></asp:Text<a href="/tag/Box/" target="_blank" class="keywords">Box</a>> <cc1:<a href="/tag/autocompleteextender/" target="_blank" class="keywords">autocompleteextender</a> ID="<a href="/tag/autocompleteextender/" target="_blank" class="keywords">autocompleteextender</a>2" runat="server" MinimumPrefixLength="1" ServiceMethod="GetString" ServicePath="AutoComplete.asmx" TargetControlID="Text<a href="/tag/Box/" target="_blank" class="keywords">Box</a>2"> </cc1:<a href="/tag/autocompleteextender/" target="_blank" class="keywords">autocompleteextender</a>> </form> </body> </html>
webService代码：
using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Collections; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web.Services; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web.Services.Protocols; /// <summary> /// AutoComplete 的<a href="/tag/zhaiyao/" target="_blank" class="keywords">摘要</a>说明 /// </summary> [WebService(Namespace = "http://te<a href="/tag/mpu/" target="_blank" class="keywords">mpu</a>ri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //下面是必须的，否则<a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>无法实现 [Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web.Script.Services.ScriptService] public class AutoComplete : Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web.Services.WebService { public AutoComplete () { //如果使用设计的组件，请取消注释以下行 //InitializeComponent(); } [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public string[] GetString(string prefixText,prefixText); //ds = <a href="/tag/sql/" target="_blank" class="keywords">sql</a>Helper.Query(str<a href="/tag/sql/" target="_blank" class="keywords">sql</a>); //for (int i = 0; i < ds.Tables[0].Rows.Count; i++) //{ // list.Add(ds.Tables[0].Rows[i][0].ToString()); //} for (int i = 0; i < count; i++) { list.Add(prefixText+i.ToString()); } return list.ToArray(); } }

后面是我自己参考别人以后得出结论

OnClientItemSelected事件是激发的客户端的事件(在这里绑定是OnArchivesIDItemSelected方法)

//实现选中智能<a href="/tag/tishi/" target="_blank" class="keywords">提示</a>时所激发的事件 function OnArchivesIDItemSelected(source,eventArgs) { var archivesID=eventArgs.get_text();//<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>在下拉列表中被选中的值 Foreground_DataStatistics_DayDataReport.GetCardnoAndSiteNameByArchivesID(archivesID,ShowSiteName);//用ajax<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a><a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="/tag/houtai/" target="_blank" class="keywords">后台</a><a href="/tag/daima/" target="_blank" class="keywords">代码</a>的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a> } //<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="/tag/zhandian/" target="_blank" class="keywords">站点</a><a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>与通信卡号 function ShowSiteName(response) { var table=response.value; if(table.Rows.length<=0) { alert("无记录"); return; } document.all.txtMonitorySiteName.value=table.Rows[0].SiteName;//<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>服务器控件的值 document.all.txtCommunicationCardno.value=table.Rows[0].CommunicationCardno;//<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>服务器控件的值 }
详细出处参考：http://www.jb51.net/article/16320.htm

AutoCompleteExtender的使用

相关推荐