AutoComplete控件是微軟提供的ASP.NET AJAX Control Toolkit 中的一個控件，是用來實(shí)現(xiàn)類似百度搜索的自動完成效果。

AutoComplete控件的用法很簡單，只要在頁面放一個TextBox和AutoComplete控件，另外，還需要一個提供數(shù)據(jù)列表的WebService就可以了。

先說這個WebService吧，其實(shí)就是用來提供AutoComplete可以使用的數(shù)據(jù)的，它可以有兩種格式，一種是兩個參數(shù)，另一個是三個參數(shù)，它們的返回值均為string[]類型。來一個三個參數(shù)的示例吧，兩個參數(shù)的更簡單。

?

[WebService(Namespace?=?"http://tempuri.org/")]
????[WebServiceBinding(ConformsTo?=?WsiProfiles.BasicProfile1_1)]
????[System.ComponentModel.ToolboxItem(false)]
????//?若要允許使用?ASP.NET?AJAX?從腳本中調(diào)用此?Web?服務(wù)，請取消對下行的注釋。
????[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",?};
????????}
????}

第一個參數(shù)prefixText為用戶輸入的字符串

第二個參數(shù)count為要獲取的數(shù)據(jù)行數(shù)

第三個參數(shù)contextKey為上下文關(guān)鍵字，也就是說跟當(dāng)前業(yè)務(wù)環(huán)境相關(guān)的數(shù)據(jù)。

?

這里要注意一點(diǎn)，雖然WebService的名稱和方法的名稱可以自己隨便起，但參數(shù)名稱是固定的，不能亂來，否則是會出問題的。這是跟Javascript傳遞參數(shù)時的調(diào)用方式有關(guān)，因?yàn)镴avascript調(diào)用時傳遞的參數(shù)是以Key Value Pair方式進(jìn)行的。

?

剩下來就是前臺了，在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參數(shù)，還需要為TextBox添加KeyDown事件的處理方法，注意，實(shí)在javascript中添加，添加的方法是在后臺注冊onkeydown事件，并在前臺添加onkeydown事件處理函數(shù)。具體如下：

?

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

?

js代碼如下：

?

function?txtAutoComplete_keydown()?{
????var?oAutoCompleteControl?=?$find("<%=AutoCompleteExtender1.ClientID %>");
????oAutoCompleteControl.set_contextKey("Hello");
}

?

在AutoComplete列表中選擇一項(xiàng)后，text自動可以自動輸入到文本框中，但是從后臺傳過來的id該如何獲取呢？?我們可以為AutoCompleteExtender設(shè)置一個OnClientItemSelected 事件，指定當(dāng)客戶端選擇一項(xiàng)后，要執(zhí)行的代碼：

<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"

?

轉(zhuǎn)載于:https://www.cnblogs.com/youring2/archive/2011/04/17/2019048.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。