开发者社区> 老朱教授> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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,如需转载请自行联系原作者,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
0 0
ASP.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图
ASP.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图
0 0
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景:   博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下: 输入你的姓名: 输入你的年龄: 提交 清空   视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
681 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载