天天看點

google 搜尋提示 搜尋下拉框 jquery

google 搜尋提示 搜尋下拉框 jquery

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<!-- saved from url=(0019)http://go.fjdh.com/ -->

<head>

<title>佛教導航-佛教網址 - http://go.fjdh.com/</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></mce:script>

<!-- <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>-->

<mce:script type="text/javascript"><!--

$(function () {

window.google = {};

window.google.ac = {};

window.google = {

ac: {

h: function (a) {

var $T = $("#kw1");

if (!a.length || a.length < 2 || a[0] != $T.val())

return;

var ih = '';

ih = "<tr style="cursor:hand" mce_style="cursor:hand"><td align='left' ><p>廣告百度</p><p style='color:#888;height:16px;overflow:hidden' id='_detail'>廣告的描述:百度</p><p style="color:#090;" mce_style="color:#090;">http://www.baidu.com</p></td></tr>";

var b = a[1];

if (b.length)

for (var j = 0; j < b.length; j++) {

if (b[j].length == 3) {

ih += '<tr><td _h="' + b[j][0].replace(//"/g, '') + '"><a style="cursor:hand;" mce_style="cursor:hand;">' + b[j][0] + '</a></td></tr>';

}

}

$("#suggests").append('<table width="100%;" cellpadding="0" cellspacing="0">' + ih + '</table>').show();

$("#suggests tr").hover(

function () {

$(this).addClass("hover");

},

function () {

$(this).removeClass("hover");

}

);

}

}

};

$("#suggests").click(function (event) {

switch (event.target.tagName) {

case "A": $("#kw1").val($(event.target).html()); break;

case "TD":

{

var $Txt = $(event.target).find("a");

if ($Txt.size())

$("#kw1").val($Txt.html());

} break;

case "P":

{

if ($(event.target).next().size() == 0) {

window.open($(event.target).html());

}

else {

$("#kw1").val($(event.target).html());

}

} break;

}

$("#suggests").hide();

});

function googleHint(key) {

if ($('#suggests')) {

$('#suggests').empty();

}

$.getScript("http://www.google.cn/complete/search?hl=zh-CN&client=suggest&js=true&q=" + encodeURIComponent(key));

}

$("#kw1").bind("keyup", function (event) {

var $keyword = $('#kw1');

var $h = $('#suggests');

if ((!$keyword.val()) || (!$keyword.val().length) || (event.keyCode == 27) || (event.keyCode == 13)) {

$h.hide();

return;

}

if (event.keyCode == 38 || event.keyCode == 40) {

var $Tr = $h.find("tr");

for (var i = 0; i < $Tr.size(); i++) {

if ($Tr.eq(i).hasClass("hover")) {

$h._i = i;

$Tr.eq(i).removeClass("hover"); /*去掉滑鼠在目前的樣式*/

break;

}

}

//40下 38上

if ($h.css("display") == 'none') return;

if (event.keyCode == 38) {/*上*/

if ($h._i == undefined) {

$h._i = $Tr.size() - 1;

}

else {

$h._i--;

}

}

else {/*下*/

if ($h._i == undefined) {

$h._i = 0;

}

else {

$h._i++;

}

}

$Tr.eq($h._i).addClass("hover");/*上一個 下一個 的滑到的條目*/

if ($h._i >= 0 && $h._i < $Tr.size()) {

var tcontext = $Tr.eq($h._i).find("a").html();

if (tcontext) {/*如果它的html不是空*/

$keyword.val(tcontext);

}

}

else {

$h._i = 0;

}

}

else {/*其他鍵盤事件*/

$h._i = -1;

googleHint($keyword.val());

}

});

});

// --></mce:script>

<mce:style type="text/css"><!--

#suggests

{

border: 1px solid #cdcdcd;

position: relative;

left: 130px;

margin: 0;

}

.hover

{

background-color: #88c4ff;

color: Red;

}

p

{

font-size: 12px;

height: 15px;

padding: 0;

margin: 0;

}

--></mce:style><style type="text/css" mce_bogus="1"> #suggests

{

border: 1px solid #cdcdcd;

position: relative;

left: 130px;

margin: 0;

}

.hover

{

background-color: #88c4ff;

color: Red;

}

p

{

font-size: 12px;

height: 15px;

padding: 0;

margin: 0;

}

</style>

</head>

<body>

<div style="width: 400px; position: absolute;">

<form target="_blank" id="searchForm" οnsubmit="javascript:$('#suggests').css('display','none'); return true;"

action="http://www.google.com/search" method="get"autocomplete="off">

<a href="http://www.google.com/intl/zh-CN/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="http://www.google.com/intl/zh-CN/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

<img src="http://www.google.com/logos/Logo_40wht.gif" mce_src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" align="middle" />

</a>

<input class="i" id="kw1" name="q" />

<input class="seBtn" id="searchBtn" type="submit" value="google搜尋" />

<span id="suggests"></span>

<input type="hidden" name="ie" value="GB2312" />

<input type="hidden" name="oe" value="GB2312" />

<input type="hidden" name="hl" value="zh-CN" />

</form>

</div>

</body>

</html>

繼續閱讀