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容器。

同时引入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 " );
}

转载于:https://www.cnblogs.com/hubcarl/archive/2010/07/03/1770385.html

猜你喜欢