当前位置：首页 > 资讯 > 技术文档

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

时间：2022-04-19 05:18 编辑：来源：阅读：
扫一扫，手机访问

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

AjaxControlToolkit是一组控件的集合，可以实现自动补充文本框，点击文本框弹出日历，加水印等Ajax效果,包含40多个控件,具体实现效果如：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx 像百度搜索一样，根据用户输入自动联想相关词汇，借助AjaxControlToolkit中的AutoCompleteExtender控件很简单的实现，实现效果如下：详细步骤： [b]一：Vs中安装AjaxControlToolkit[/b] AjaxControlToolkit安装到VS中(需要注意版本问题)：安装方法：http://www.asp.net/ajaxlibrary/act.ashx 相应版本提示：http://ajaxcontroltoolkit.codeplex.com/ [b]二：Web页面中调用AutoCompleteExtender[/b](页面中要提前Register,第二行代码)

[u]复制代码[/u] 代码如下:

<%@ 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>

[b]三：添加Web服务 WebService.asmx[/b]

[u]复制代码[/u] 代码如下:

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

[b]四：完成，运行Web页面即可看到文本框的自动补充效果，需要注意的地方如下[/b]： 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:

[u]复制代码[/u] 代码如下:

<%@ 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

[u]复制代码[/u] 代码如下:

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

[u]复制代码[/u] 代码如下:

<%@ 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();
}
}

全部评论(0)

上一篇：jquery的ajax同步和异步的理解及示例
下一篇：AngularJS学习笔记之TodoMVC的分析

资讯排行榜
更多>>