利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤

longzhutengyue

2013-02-15

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。
文本框输入的值传递到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(); 
} 
}

百度搜索 system namespace

安科网

利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤

longzhutengyue

longzhutengyue

相关推荐

用Python写Roboot Framework测试九：用Python写Roboot Framework测试

用rod获取百度搜索结果的例子

用 Python 获取百度搜索结果链接

Chrome 百度搜索热点过滤插件 - 开源软件

百度熊掌号: 2018-2020年, 你不容错过的流量红利!

实现百度搜索栏自动提示功能

仿百度搜索时的下拉列表（jQuery实现）

python+selenium实现自动化百度搜索关键词

百度搜索结果跳转URL代码规律分析

网站百度快照不更新原因分析

win10系统百度搜索重复自动刷新怎么办？win10系统网页无限刷新的两种解决方法

win7系统使用百度搜索资料时自动跳转到搜狗搜索的故障原因及解决方法

如何删除百度搜索记录？

千万别用百度搜索这些词：真吓一跳

使用Java调用百度搜索

最好用的百度网盘搜索引擎，百度搜索【我要盘】

怎样把搜索引擎收录的网页记录删除呢？

当心搜索结果把自己埋进去

如何全面的提升百度搜索排名？

Jsoup爬虫获取自己网站在百度搜索中的实时排名

longzhutengyue