google 搜索提示 搜索下拉框 jquery

google 搜索提示 搜索下拉框 jquery_第1张图片

 

代码:

<!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%;" border="0" 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" onsubmit="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/" mce_href="http://www.google.com/intl/zh-CN/"> <img src="http://www.google.com/logos/Logo_40wht.gif" mce_src="http://www.google.com/logos/Logo_40wht.gif" border="0" 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>  

你可能感兴趣的:(google 搜索提示 搜索下拉框 jquery)