【下载文档:  利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤.txt 】

---

利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
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" %>

三：添加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 { ///

/// WebService 的摘要说明 ///

[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 suggestions = new List();//声明一泛型集合 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 list = new List(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。 文本框输入的值传递到WebService中： aspx: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSearch.aspx.cs" Inherits="TestSearch" %> <%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

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 suggestions = new List();//声明一泛型集合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(); } }