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