Ajax之AutoCompleteExtender控件,让TextBox有联想输入的效果
正在做的项目有一个需求,就是City的文本框要有联想输入的功能,我输入第一个字母,然后所有以这个字母开头的城市要像DropdownList的下拉框一样,把这些项显示出来供用户选择,在网上搜索了一些解决方案,最后还是决定用Ajax的AutoCompleteExtender控件。
注:简单的联想输入功能用该控件可以实现,如果过于复杂,还是建议去寻找新的第三方用户控件吧。
首先,如果你没有Ajax控件包,请先下载它的Dll文件,链接我就不给了,自己去网上搜索一下就OK了。
下好Dll之后,放在网站的Bin下面,再引用该Dll,然后打开工具箱,单击右键,选中“选择项”,然后浏览文件找到Ajax的Dll,再确定,然后你就会发现工具箱里有了一组Ajax Extensions,这些就是Ajax的所有控件了。
接下来
1:在aspx页面注册控件
<%@ Register Assembly="AjaxControlToolKit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
2:在用来作为输入联想的TextBox处添加以下代码(如果工具箱里已经有了Ajax Extensions,可以直接把该控件拖到页面,会自动生成并注册控件)
<asp:TextBox ID="TB_City" runat="server"/> <cc1:AutoCompleteExtender ID="AC1" runat="server" MinimumPrefixLength="1" ServicePath="SearchCity.asmx" ServiceMethod="GetCity" TargetControlID="TB_City" CompletionSetCount="10" EnableCaching="false"></cc1:AutoCompleteExtender>
此处重点:<cc1:AutoCompleteExtender>的前缀cc1要与注册控件里的TagPrefix相同。
AutoCompleteExtender属性:MinimunPrefixLength为输入几个字符时开始匹配;ServicePath为WEB服务对应的文件路径;ServiceMethod为服务代码里的方法名;TargetControlID即为需要输入联想的TextBox的ID;CompletionSetCount为下拉框里显示的条目数;EnableCaching为是否开启缓存(如果开启缓存会导致联想误差,请慎用)。
* 如果在选择了联想项之后还需要做一些处理,可添加“OnClientItemSeleted=JavascriptFunction”,由字面意思就可理解得到,是客户端的Funcation,所以只能用Javascript。
* Source.get_element().id 可以提到该AutoCompleteExtender的TargetControlID(当AutoCompleteExtender绑定到GridView之类的控件中时可用)
3:新建一个Web Service,注意要与第2步中的ServicePath同一目录同一文件名,意为AutoCompleteExtender控件指向该Service。
此处重点:新建Web Service之后,会在目录下多出一个SearchCity.asmx的文件,并打开CS文件的代码,注意,该SearchCity.asmx对应的代码文件是自动放置在App_Code文件夹下的。
4:编辑App_Code文件夹下的SearchCity.cs代码:
using system.... [WebService(Namespace = " http://tempuri.org/")] [WebServiceBinding(ConformsTo = Wsiprofiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService]//自动生成的代码此处是注释的,请把注释去掉 public class SearchCity: System.Web.Services.WebService { public SearchCity() { } [WebMethod] //注意此处,函数名为GetCity,与第二步中的ServiceMethod要对应。 //如果是做联想输入,函数名可以自己取,函数的返回类型必须为string数组,参数只能是两个,名字也只能是prefixText和count,注意大小写一致,参数的数据类型也必须一致。 public string[] GetCity(string prefixText, int count) { //在此处添加你的代码,只要返回你需要联想的数组即可。 string sql = string.Format("select top{0} city from citylist where city like '" + @prefixText + "%'",@count); SqlParameter[] param = new SqlParameter[] { new SqlParameter("@prefixText",prefixText), new SqlParameter("@prefixText",prefixText) }; DataTable dt = DBHelpSQL.Query(sql,param).Tables[0];//此处为我自己封装好的函数,意为拿到上面Sql语句执行的结果集 string [] result = new string[dt.Rows.Count]; if (dt.Rows.Count > 0) { for ( int i = 0; i < dt.Rows.Count; i++ ) { if (dt.Rows[i][0].ToString().Trim().IndexOf('\'') > 0) result[i] = dt.Rows[i][0].ToString().Trim(); else result[i] = "'" + dt.Rows[i][0].ToString().Trim() + "'"; } } return result; } }
此处重点:请注意一定要将代码中[System.Web.Script.Services.ScriptService]前的注释去掉
如果你在该Cs代码文件中需要用到多个方法,请记得一定要在每一个函数前加上[WebMethod]
如果需要用到Session或者Application等,请如下操作[WebMethod(EnableSession = true)]
请注意各种路径和方法名称的对应。
请注意函数的返回类型,参数个数,名称,类型的对应。
此处代码处请注意:如果返回的字符串里包含有“0001”类型的字符串,AutoCompleteExtender会默认将其显示为1,所以,在字符串的前后加上单引号,才能保证显示正常。
if (dt.Rows[i][0].ToString().Trim().IndexOf('\'') > 0) result[i] = dt.Rows[i][0].ToString().Trim(); else result[i] = "'" + dt.Rows[i][0].ToString().Trim() + "'";
到这里就基本完成了。运行页面即可看到演示效果,如果有什么疑问,请随时提出,如有批评,欢迎指正。
by Julie.Zhao 10/12/2011