利用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" %>

　　<!DOCTYPE html>

　　</head>

　　<body>

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

　　文本框输入的值传递到WebService中：

　　aspx:

复制代码代码如下:

　　<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSearch.aspx.cs" Inherits="TestSearch" %>

　　<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

　　<!DOCTYPE html>

　　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>

　　<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();

　　}

教程首页更多教程