Asp.net Ajax AutoComplete 控件的用法

简介:

AutoComplete控件是微软提供的ASP.NET AJAX Control Toolkit 中的一个控件,是用来实现类似百度搜索的自动完成效果。

AutoComplete控件的用法很简单,只要在页面放一个TextBox和AutoComplete控件,另外,还需要一个提供数据列表的WebService就可以了。

先说这个WebService吧,其实就是用来提供AutoComplete可以使用的数据的,它可以有两种格式,一种是两个参数,另一个是三个参数,它们的返回值均为string[]类型。来一个三个参数的示例吧,两个参数的更简单。

 

复制代码
[WebService(Namespace  =   " http://tempuri.org/ " )]
    [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控件,代码如下:

 

        < 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" >
        
</ ajaxToolkit:AutoCompleteExtender >

除了这些之外,为了传递contextKey参数,还需要为TextBox添加KeyDown事件的处理方法,注意,实在javascript中添加,添加的方法是在后台注册onkeydown事件,并在前台添加onkeydown事件处理函数。具体如下:

 

this .txtAutoComplete.Attributes.Add( " onkeydown " " return txtAutoComplete_keydown() " );

 

js代码如下:

 

function  txtAutoComplete_keydown() {
    
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"




本文转自齐师傅博客园博客,原文链接:




本文转自齐师傅博客园博客,原文链接:XXXXX,如需转载请自行联系原作者,如需转载请自行联系原作者

相关文章
|
2月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
40 8
|
13天前
|
C#
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
5月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
43 1
|
1月前
|
开发框架 JavaScript 前端开发
|
5月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
70 0
|
5月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
73 0
|
5月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
76 0
|
5月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
93 0
|
1月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
28 7
|
1月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
39 0