仿google查询效果

最新推荐文章于 2024-11-14 10:50:04 发布

qqlxx

最新推荐文章于 2024-11-14 10:50:04 发布

阅读量679

点赞数 1

分类专栏： ajax 文章标签： google xmlhttprequest function xhtml null string

本文链接：https://blog.csdn.net/qqlxx/article/details/2270089

版权

ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

今天没事做，闲得无聊做了个玩玩，希望对刚学的人有点帮助！

前台：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    var xmlHttp;
    function createXmlRequest()
    {
         try {
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e2) {
            xmlHttp = false;
          }
        }
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
          xmlHttp = new XMLHttpRequest();
        }
    }

    function handle()
    {
        var key=document.getElementById("txtSearch").value;
        createXmlRequest();
        var url = "Handle.aspx?key="+key;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = show;
        xmlHttp.send(null);
        if(document.getElementById("txtSearch").value=="")
        {
            document.getElementById("showResult").innerText = "";
            document.getElementById("showResult").style.visibility = "hidden";
        }
    }

    function show()
    {
        if(xmlHttp.readyState == 4)
        {
            if(xmlHttp.status == 200)
            {
                var showResult = "";
                var result = xmlHttp.responseText.split(",");

                var Abe = getLTWH(document.getElementById("txtSearch"));
                if(xmlHttp.responseText != "")
                {
                    document.getElementById("showResult").style.visibility = "visible";
                }
                document.getElementById("showResult").style.left=Abe.left;
                document.getElementById("showResult").style.top=Abe.top + Abe.height;
                document.getElementById("showResult").style.width=Abe.width - 2;
                document.getElementById("showResult").style.height=Abe.height * result.length;

                for(i=0;i<result.length;i++)
                {
                    showResult += result[i] + "<br />"
                }
                document.getElementById("showResult").innerHTML = showResult;
            }
        }
    }

    function getLTWH(element)
    {
        if ( arguments.length != 1 || element == null )
        {
            return null;
        }
        var offsetTop = element.offsetTop;
        var offsetLeft = element.offsetLeft;
        var offsetWidth = element.offsetWidth;
        var offsetHeight = element.offsetHeight;
        while( element = element.offsetParent )
        {
            offsetTop += element.offsetTop;
            offsetLeft += element.offsetLeft;
        }
        var Abe={
           left:offsetLeft,
           top:offsetTop,
           width:offsetWidth,
           height:offsetHeight
        }
        return Abe;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="showResult"
            style="background-color: #6699FF; border: 1px solid #C0C0C0; position: absolute; visibility:hidden" ></div>
    <input type="text" id="txtSearch" name="txtSearch" οnkeyup="handle()" />
    </div>
    </form>
</body>
</html>

后台：

string key = Request.QueryString["key"].ToString();
        string result = string.Empty;
        SqlConnection conn = new SqlConnection("Data Source=.//SQLEXPRESS;Initial Catalog=qq;Integrated Security=SSPI;");
        SqlCommand cmd = new SqlCommand();
        cmd.CommandText = "select userName from users where userName like '" + key + "%'";
        cmd.Connection = conn;
        conn.Open();
        SqlDataReader sdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        while (sdr.Read())
        {
            result += sdr.GetString(0) + ",";
        }
        result = result.TrimEnd(',');
        Response.Write(result);
        Response.End();