Asp.net Ajax AutoComplete 控件的用法
- 2019 年 10 月 7 日
- 筆記
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"
