使用AjaxControlToolkit实现百度搜索时的下拉列表提示

CSS网页开发+下拉菜单工具(PVII CSS Affinity plus Drop Menu Magic)v1.08 官方特别版

类型：滤镜插件大小：1.5M语言：英文评分：6.6
标签：

立即下载

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。