Asp.net Ajax AutoComplete 控件的用法
AutoComplete控件是微软提供的ASP.NET AJAX Control Toolkit 中的一个控件,是用来实现类似百度搜索的自动完成效果。
AutoComplete控件的用法很简单,只要在页面放一个TextBox和AutoComplete控件,另外,还需要一个提供数据列表的WebService就可以了。
先说这个WebService吧,其实就是用来提供AutoComplete可以使用的数据的,它可以有两种格式,一种是两个参数,另一个是三个参数,它们的返回值均为string[]类型。来一个三个参数的示例吧,两个参数的更简单。
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService
{
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count, string contextKey)
{
return new string[] { prefixText + "+" + count.ToString() + "+" + contextKey, "Tom", "Jerry", "Helly", "Jack", };
}
}
第一个参数prefixText为用户输入的字符串
第二个参数count为要获取的数据行数
第三个参数contextKey为上下文关键字,也就是说跟当前业务环境相关的数据。
这里要注意一点,虽然WebService的名称和方法的名称可以自己随便起,但参数名称是固定的,不能乱来,否则是会出问题的。这是跟Javascript传递参数时的调用方式有关,因为Javascript调用时传递的参数是以Key Value Pair方式进行的。
剩下来就是前台了,在aspx页面中,放一个TextBox控件和一个AutoComplete控件,代码如下:
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCompletionList"
ServicePath="/WebService/AutoCompleteService.asmx" Enabled="true" MinimumPrefixLength="1"
CompletionSetCount="10" TargetControlID="txtAutoComplete" CompletionInterval="100">
</ajaxToolkit:AutoCompleteExtender>
除了这些之外,为了传递contextKey参数,还需要为TextBox添加KeyDown事件的处理方法,注意,实在javascript中添加,添加的方法是在后台注册onkeydown事件,并在前台添加onkeydown事件处理函数。具体如下:
js代码如下:
var oAutoCompleteControl = $find("<%=AutoCompleteExtender1.ClientID %>");
oAutoCompleteControl.set_contextKey("Hello");
}
在AutoComplete列表中选择一项后,text自动可以自动输入到文本框中,但是从后台传过来的id该如何获取呢? 我们可以为AutoCompleteExtender设置一个OnClientItemSelected 事件,指定当客户端选择一项后,要执行的代码:
<asp:TextBox runat="server" ID="txtAutoComplete" /><ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCompletionList" ServicePath="/WebService/AutoCompleteService.asmx" Enabled="true" MinimumPrefixLength="1" CompletionSetCount="10" TargetControlID="txtAutoComplete" CompletionInterval="100" OnClientItemSelected="OnAEItemSelected"></ajaxToolkit:AutoCompleteExtender>
function OnAEItemSelected(source, eventArgs) { alert(eventArgs.get_value();); }
------------------------------------------------------------
2012年3月31日 添加自定义样式
地址:http://hi.baidu.com/tieniu116/blog/item/6503e6875dcb432e66096edd.html
1、首先添加样式
<style type="text/css">
.autocomplete_completionListElement
{
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : 'default';
overflow : auto;
height :auto;
max-height:200px;
text-align : left;
list-style-type : none;
}
.autocomplete_listItem
{
border-style : solid;
border :#EAEFF9;
border-width : 1px;
background-color : window;
color : windowtext;
}
.autocomplete_highlightedListItem
{
background-color: #ffff99;
color: black;
padding: 1px;
}
</style>
2、在AutoCompleteExtender控件中添加属性:
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
转载于:https://www.cnblogs.com/youring2/archive/2011/04/17/2019048.html
Asp.net Ajax AutoComplete 控件的用法相关推荐
- 一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用
简介: AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便. 重要属 ...
- 开始使用asp.net ajax的控件工具包AJAX Control Toolkit
我们来为我们的 toolbox 添加一些资源 , 这个要通过下载安装 asp.net ajax 工具包完成.登录 www.asp.net 点击 AJAX 按钮,然后找到 ASP.NET AJAX Co ...
- ASP.NET AJAX - Timer控件之摆放位置的影响
ASP.NET AJAX所提供的 Timer 控件是一个服务器控件,它能够定时引发全网页回传,当然,在搭配了 UpdatePanel 控件之后,就可以定时引发异步回传并局部更新 UpdatePanel ...
- ASP.NET中AJAX的UpdatePannel控件的用法
ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异 步局部更新区域,它必须依赖于ScriptManager存在, ...
- ASP.NET-----Repeater数据控件的用法总结
一.Repeater控件的用法流程及实例: 1.首先建立一个网站,新建一个网页index.aspx. 2.添加或者建立APP_Data数据文件,然后将用到的数据库文件放到APP_Data文件夹中. 3 ...
- ASP.NET-----Repeater数据控件的用法总结(转)
ASP.NET-----Repeater数据控件的用法总结(转) 一.Repeater控件的用法流程及实例: 1.首先建立一个网站,新建一个网页index.aspx. 2.添加或者建立APP_Data ...
- aspx repeater 用法_详解ASP.NET-----Repeater数据控件的用法总结
一.Repeater控件的用法流程及实例: 1.首先建立一个网站,新建一个网页index.aspx. 2.添加或者建立APP_Data数据文件,然后将用到的数据库文件放到APP_Data文件夹中. 3 ...
- 构建安全的 ASP.NET 网页和控件
本页内容 本模块内容 目标 适用范围 如何使用本模块 威胁和对策 设计注意事项 输入验证 跨站点脚本 身份验证 授权 模拟 敏感数据 会话管理 参数处理 异常管理 审核和日志记录 小结 其他资源 本模 ...
- jqueryui autocomplete 控件自定义source检索
有时侯我们在做自动完成时为了从多字段去检索,往往会发起个ajax请求让服务端去实现.对于这种数据集固定不变的数据源这种做法显然给服务器增加了不少请求. 实际上jqueryui autocomplete ...
最新文章
- java.lang.UnsatisfiedLinkError:no jhdf5 in java.library.path问题的解决
- 2、cookie session token详解
- VLAN的Hybrid和Trunk端口有何区别
- OneNand、Nand和Nor三种Flash的区别
- 软件项目管理的重点知识
- SPSS 27 发布了!我为什么要在两个月前买SPSS?为什么?为什么?为什么?
- 【软件相关】LabView使用总结
- 啦啦啦啦啦啦啦啦啦啦啦啦这是一篇分界线
- 解决或者设置网页变灰-CSS-filter属性-哀悼
- 2017第四届“云鼎奖”申报火热进行中
- 关于cv2.cvtColor函数的一些小小的思考
- 安装时提示用户在命令行上发出了EULAS_AGREED=1,表示不接受许可协议
- Office2019 卸载重新安装-2022 Win10【不花钱+官方途径】
- 零基础搭建:可扫码、实时分析的设备巡检系统
- Elastic:Beyond Search!
- Mybatis整体学习笔记-CRUD-配置解析-结果集映射-日志-注解开发-复杂环境-动态SQL-缓存
- 百度服务器4月1日维护,2014年4月1日定期维护公告
- Haproxy 性能优化
- java继承执行子类输出顺序_JAVA继承顺序
- 反编译获取微信小程序源码(包含错误解决办法)