zoukankan      html  css  js  c++  java
  • 借助AjaxControlToolkit实现百度搜索时的下拉列表提示

    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。

    参考:

    http://blog.sina.com.cn/s/blog_63070b1d0100ffpf.html

    http://visionsky.blog.51cto.com/733317/268650

    http://moosdau.blog.163.com/blog/static/4371128200852524114408/ (参数传递)

    文本框输入的值传递到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();
        }
    
    }
  • 相关阅读:
    [LeetCode] 278. First Bad Version 第一个坏版本
    [LeetCode] 119. Pascal's Triangle II 杨辉三角 II
    [LeetCode] 118. Pascal's Triangle 杨辉三角
    [LeetCode] 272. Closest Binary Search Tree Value II 最近的二叉搜索树的值 II
    校验数组中是否存在某一个元素
    css sprites 图片位置计算
    后台获取当前客户端浏览器的类型
    Linq,拉姆达表达式注意!
    window.open 设置高和宽无效
    asp:FileUpload 控件上传多文件
  • 原文地址:https://www.cnblogs.com/siri/p/2910686.html
Copyright © 2011-2022 走看看