利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
2024-09-01 08:29:06
供稿：网友
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);
