AjaxControlToolkit是一組控件的集合，可以實現自動補充文本框，點擊文本框彈出日歷，加水印等Ajax效果,包含40多個控件,具體實現效果如：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx
像百度搜索一樣，根據用戶輸入自動聯想相關詞匯，借助AjaxControlToolkit中的AutoCompleteExtender控件很簡單的實現，實現效果如下：
詳細步驟：
一：Vs中安裝AjaxControlToolkit
AjaxControlToolkit安裝到VS中(需要注意版本問題)：
安裝方法：http://www.asp.net/ajaxlibrary/act.ashx
相應版本提示：http://ajaxcontroltoolkit.codeplex.com/
二：Web頁面中調用AutoCompleteExtender(頁面中要提前Register,第二行代碼)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HTML_editor.WebForm1" %> <%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" CompletionSetCount="10" EnableCaching="true" MinimumPrefixLength="1" CompletionInterval="100" ServicePath="WebService.asmx" ServiceMethod="GetEnglishName"> </asp:AutoCompleteExtender> </div> </form> </body> </html>
三，添加Web服務 WebService.asmx
using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.Script.Services; using System.Web.Services; namespace HTML_editor { /// <summary> /// WebService 的摘要說明 /// </summary> [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 WebService : System.Web.Services.WebService { //從數據庫中讀取匹配信息 [WebMethod] [ScriptMethod] public string[] GetEnglishName(string prefixText, int count) { List<string> suggestions = new List<string>();//聲明一泛型集合 SqlConnection con = new SqlConnection("server=.;database=Attendance;uid=sa;pwd=;"); con.Open(); SqlCommand com = new SqlCommand(" select [EnglishName] from [Employee] where [EnglishName] like '%t%' order by [EnglishName]", con); SqlDataReader sdr = com.ExecuteReader(); while (sdr.Read()) { suggestions.Add(sdr.GetString(0)); } sdr.Close(); con.Close(); return suggestions.ToArray(); } //直接用方法產生匹配信息 //[WebMethod] //public string[] GetCompleteList(string prefixText, int count) //{ // char c1, c2, c3; // if (count == 0) // count = 10; // List<String> list = new List<string>(count); // Random rnd = new Random(); // for (int i = 1; i <= count; i++) // { // c1 = (char)rnd.Next(65, 90); // c2 = (char)rnd.Next(97, 122); // c3 = (char)rnd.Next(97, 122); // list.Add(prefixText + c1 + c2 + c3); // } // return list.ToArray(); //} } }
四，完成，運行Web頁面即可看到文本框的自動補充效果，需要注意的地方如下：
AutoCompleteExtender控件參數說明：
1.TargetControlID:指定要實現提示功能的控件；
2.ServicePath:WebService的路徑，提取數據的方法是寫在一個WebService中的；
3.ServeiceMethod:寫在WebService中的用於提取數據的方法的名字；
4.MinimumPrefixLength:用來設置用戶輸入多少字母才出現提示效果；
5.CompletionSetCount:設置提示數據的行數；
6.CompletionInterval:從服務器獲取書的時間間隔，單位是毫秒。
WebService.asmx 需要注意的地方：
1.由於該WEB服務是為Ajax框架提供服務的，因此在類聲明之前得加上屬性聲明：
[System.Web.Script.Services.ScriptService]
2.特別需要注意的是GetTextString這個方法。凡是為AutoCompleteExtender控件提供服務的方法都必需完全滿足以下三個條件：
A.方法的返回類型必需為：string []；
B.方法的傳入參數類型必需為：string , int；
C.兩個傳入參數名必需為：prefixText , count。
參考：
http://blog.sina.com.cn/s/blog_63070b1d0100ffpf.html
http://visionsky.blog.51cto.com/733317/268650
http://moosdau.blog.163.com/blog/static/4371128200852524114408/ (參數傳遞)
文本框輸入的值傳遞到WebService中：
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSearch.aspx.cs" Inherits="TestSearch" %> <%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> function OnTxtPersonInfoKeyDown() { var val = document.getElementById("<%=TextBox1.ClientID %>").value; var NameClientID = "<%=AutoCompleteExtender1.ClientID %>"; var acName = $find(NameClientID); if (acName != null) { acName.set_contextKey(val); } } function OnTxtPersonInfoKeyDown2() { var val = document.getElementById("<%=TextBox2.ClientID %>").value; var NameClientID = "<%=AutoCompleteExtender2.ClientID %>"; var acName = $find(NameClientID); if (acName != null) { acName.set_contextKey(val); } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1" CompletionSetCount="10" EnableCaching="false" FirstRowSelected="true" UseContextKey="True" MinimumPrefixLength="0" CompletionInterval="100" ServicePath="WebService.asmx" ServiceMethod="GetEnglishName"> </asp:AutoCompleteExtender> <br /> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="TextBox2" CompletionSetCount="10" EnableCaching="false" FirstRowSelected="true" UseContextKey="True" MinimumPrefixLength="0" CompletionInterval="100" ServicePath="WebService.asmx" ServiceMethod="GetEnglishName"> </asp:AutoCompleteExtender> </div> </form> </body> </html>
aspx.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class TestSearch : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { TextBox1.Attributes.Add("onkeydown", "return OnTxtPersonInfoKeyDown();"); TextBox2.Attributes.Add("onkeydown", "return OnTxtPersonInfoKeyDown2();"); } }
webservice.asmx.cs
<%@ WebService Language="C#" Class="WebService" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.Script.Services; using System.Data; using System.Data.SqlClient; using System.Collections.Generic; [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消注釋以下行。 [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { //從數據庫中讀取匹配信息 [WebMethod] [ScriptMethod] public string[] GetEnglishName(string prefixText, int count, string contextKey) { SQLHelper sqlH = new SQLHelper(); //contextKey = "t"; string strSql = " select [EnglishName] from [Employee] where [LeftDate] is null and [EnglishName] like '" + contextKey + "%' order by [EnglishName] "; DataTable dt = sqlH.ExecuteQuery(strSql, CommandType.Text); List<string> suggestions = new List<string>();//聲明一泛型集合 suggestions.Clear(); if (dt.Rows.Count > 0) { for (int i = 0; i < dt.Rows.Count; i++) { suggestions.Add(dt.Rows[i][0].ToString()); } } return suggestions.ToArray(); } }