借助AjaxControlToolkit实现百度搜索时的下拉列表提示-白红宇

借助AjaxControlToolkit实现百度搜索时的下拉列表提示

阅读量：7184 次

发布时间：2019-06-29

本文共 5471 字，大约阅读时间需要 18 分钟。

AjaxControlToolkit是一组控件的集合，可以实现自动补充文本框，点击文本框弹出日历，加水印等Ajax效果,包含40多个控件,具体实现效果如：

像百度搜索一样，根据用户输入自动联想相关词汇，借助AjaxControlToolkit中的AutoCompleteExtender控件很简单的实现，实现效果如下：

详细步骤：

一：Vs中安装AjaxControlToolkit

AjaxControlToolkit安装到VS中(需要注意版本问题)：

安装方法：

相应版本提示：

二：Web页面中调用AutoCompleteExtender(页面中要提前Register,第二行代码)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HTML_editor.WebForm1" %><%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

三，添加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{    ///     /// WebService 的摘要说明    /// 
    [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
     
       suggestions = new List
      
       ();//声明一泛型集合            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
       
         list = new List
        
         (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" %>

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
     
       suggestions = new List
      
       ();//声明一泛型集合        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();    }}

转载于:https://www.cnblogs.com/siri/archive/2013/02/13/2910686.html

你可能感兴趣的文章