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"

?

轉載于:https://www.cnblogs.com/youring2/archive/2011/04/17/2019048.html

總結

以上是生活随笔為你收集整理的Asp.net Ajax AutoComplete 控件的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。