Google Search实现

Google Search实现其实通过传递查询关键字构建一个url，然后根据Http请求获取相关内容以json格式返回到客户端。

关键是url的构建格式：http://www.google.cn/complete/search?hl=en&client=suggest&js=true&qu=" + Request.QueryString["qu"]

    下面根据url创建http请求获取搜索结果：json格式（匹配内容，匹配关键字、匹配数目）

 public partial class GoogleSearch : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            string ret = GetPageHtml("http://www.google.cn/complete/search?hl=en&client=suggest&js=true&qu=" + Request.QueryString["qu"]);

            Response.Write(ret);

        }

        protected string GetPageHtml(string url)
        {

            string pageinfo;

            try
            {

                WebRequest myreq = WebRequest.Create(url);

                WebResponse myrep = myreq.GetResponse();

                StreamReader reader = new StreamReader(myrep.GetResponseStream(), Encoding.GetEncoding("UTF-8"));

                pageinfo = reader.ReadToEnd();

            }

            catch
            {

                pageinfo = "";

            }

            return pageinfo;

        }
    }

然后根据返回结果构造一个div层：一个输入框和一个弹出div容器。

 <input type="text" id="txtSearch"  name="q"   class="textbox"  value="Google" onfocus="Onfocus()" onkeyup="showGs(event)" autocomplete="off" style=" 99%;color :Gray;"    />
  <div id="ts" style="position: absolute; top: 58px; left:10px; 81%; padding-left:4px"></div>

同时引入div样式：

        #ts
        {
            display: none;
            position: absolute; /*left:100px; top:55px;*/
            width: 220px;
            background-color: #FFFFFF;
            border: 1px solid #666;
            text-align: left;
        }
        #ts a
        {
            display: block;
            height: 20px;
            line-height: 20px;
            cursor: pointer;
            text-align: left;
        }
        #ts a:hover
        {
            background-color: #D5E2FF;
        }

下面是用JavaScript制作一个div层：

   1、引入jquery类库 jquery.js

   2、根据结果构建div层

    

var a_i;
function showGs(event) {
    if ($.browser.msie) {
        var keyStr = event.keyCode;
    }
    else var keyStr = event.which;
    if (keyStr != 38 && keyStr != 40 && keyStr != 13) {
        $("#ts").empty();
        $("#ts").css("display", "none");
        var vsGsName = escape($("#txtSearch").val());
        if (vsGsName != "") {
            $.get("GoogleSearch.aspx", { qu: vsGsName }, function(m) {
                var arry = m.toString().match(/([[][^\[]*?\])/g);
                if (arry == null || 0 == arry.length) {
                    return;
                }
                var arryResult = [];
                var arryChild;
                for (var i = 0, length = arry.length; i < length; i++) {
                    arryChild = eval(arry[i].toString());
                    arryResult.push("<a>" + arryChild[0] + "</a>");
                }
                $("#ts").html(unescape(arryResult.join('')));
                $("#ts>a").bind("click", vst);
                $("#ts").css("display", "block");
                a_i = -1;
            });
        }
        else {
            $("#ts").css("display", "none");
        }
    }
    else {
        if ($("#ts").css("display") == "block") {
            var aLen = $("#ts>a").length;
            var _aLen = Number(aLen) - 1;
            if (keyStr == 38) {
                if (a_i >= 0 && a_i <= _aLen) $("#ts>a").get(a_i).style.backgroundColor = "";
                a_i = Number(a_i) - 1;
                if (a_i < 0) a_i = _aLen;
                $("#ts>a").get(a_i).style.backgroundColor = "#D5E2FF";
            }
            else if (keyStr == 40) {
                if (a_i >= 0 && a_i <= _aLen) $("#ts>a").get(a_i).style.backgroundColor = "";
                a_i = Number(a_i) + 1;
                if (a_i >= aLen) a_i = 0;
                $("#ts>a").get(a_i).style.backgroundColor = "#D5E2FF";
            }
            else if (keyStr == 13) {
                var entLiText = $("#ts>a").get(a_i).innerHTML;
                $("#txtSearch").val(entLiText);
                $("#ts").css("display", "none");
            }
        }
    }
}

function vst() {
    var liText = $(this).text();
    $("#txtSearch").val(liText);
    $("#ts").css("display", "none");
}