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;
}
}
{
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="width: 99%;color :Gray;" />
<div id="ts" style="position: absolute; top: 58px; left:10px; width: 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 ;
}
#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 " );
}
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