<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>搜索框</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.tip{width:252px;height:auto;border:1px solid #aebeee;display:none;margin-top:-3px;}
.tip ul{margin-top:5px;list-style-type:none;padding-left:2px;line-height:20px;font-size:13px;_margin-left:0px;}
.tip ul li a{cursor:pointer;display:block;padding-left:8px;}
.h1{background-color:#efefff;}
.searchTxt{height:22px;width:250px;font-size:20px;}
.searchBtn{width:70px;height:28px;}
</style>
<script>
function dcs(s, i)
{
if (i && document.getElementById(i)) {
document.getElementById(i).parentNode.removeChild(document.getElementById(i));
}
var js = document.body.appendChild(document.createElement("SCRIPT"));
js.src = s;
if (i) {
js.id = i;
}
}
function changeTheme(t,logo)
{
document.title = t;
}
function showtip(event)
{
var event = window.event || event;
if(event.keyCode != 38 && event.keyCode != 40){
val = $("#search_input").val();
dcs('http://www.google.cn/complete/search?hl=zh-CN&q=' + encodeURIComponent(val) + '&_=' + Math.random(), 'gsg');
}
if($(".tip").css("display") != 'none')
if(event.keyCode == 38){
var n = getselsect();
if(n == 1 || n==0){
$("#tip_ul li:first-child").removeClass("h1");
$("#tip_ul li:last-child").addClass("h1");
$("#search_input").val($("ul li:last-child > a").html());
} else {
$("#tip_ul li:nth-child("+n+")").removeClass("h1");
$("#tip_ul li:nth-child("+(n-1)+")").addClass("h1");
$("#search_input").val($("#tip_ul li:nth-child("+(n-1)+") > a").html());
}
}
if(event.keyCode == 40){
var n = getselsect();
if(n == $("#tip_ul li").length || n==0){
$("#tip_ul li:last-child").removeClass("h1");
$("#tip_ul li:first-child").addClass("h1");
$("#search_input").val($("ul li:first-child > a").html());
} else {
$("#tip_ul li:nth-child("+n+")").removeClass("h1");
$("#tip_ul li:nth-child("+(n+1)+")").addClass("h1");
$("#search_input").val($("#tip_ul li:nth-child("+(n+1)+") > a").html());
}
}
}
window.google = {};
window.google.ac={};
window.google.ac.h = function(a){
if(a[1] && a[1].length>1){
var str = '';
for(var i=0;i<a[1].length;i++){
str += '<li><a>'+ a[1][i][0] +'</a></li>';
}
$("#tip_ul").html(str);
};
$(".tip li").hover(
function () {
$(this).addClass("h1");
},
function () {
$(this).removeClass("h1");
}
);
if(str){
$(".tip").show();
$("#tip_ul > li > a").click(function(){
$("#search_input").val($(this).html());
$("#search_form").submit();
setTimeout("count_key()",'100');
});
}
}
function count_key()
{
setTimeout("$('.tip').hide()",'1000');
}
$(function(){
$("body").click(
function(){
$("#kwh").hide();
});
});
function getselsect()
{
var lis = document.getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
if(lis[j].className == 'h1'){
return j+1;
}
}
return 0;
}
</script>
</head>
<body id="b1">
<form id="search_form" action="http://www.baidu.com/s" target="_blank">
<div class="search">
<input type="text" id="search_input" class="searchTxt" name="wd" autocomplete="off" οnkeydοwn="showtip(event)" >
<input type="submit" class="searchBtn" value="搜索" οnclick="count_key()" >
</div>
<div class="tip" id="kwh">
<ul id="tip_ul">
</ul>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>搜索框</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.tip{width:252px;height:auto;border:1px solid #aebeee;display:none;margin-top:-3px;}
.tip ul{margin-top:5px;list-style-type:none;padding-left:2px;line-height:20px;font-size:13px;_margin-left:0px;}
.tip ul li a{cursor:pointer;display:block;padding-left:8px;}
.h1{background-color:#efefff;}
.searchTxt{height:22px;width:250px;font-size:20px;}
.searchBtn{width:70px;height:28px;}
</style>
<script>
function dcs(s, i)
{
if (i && document.getElementById(i)) {
document.getElementById(i).parentNode.removeChild(document.getElementById(i));
}
var js = document.body.appendChild(document.createElement("SCRIPT"));
js.src = s;
if (i) {
js.id = i;
}
}
function changeTheme(t,logo)
{
document.title = t;
}
function showtip(event)
{
var event = window.event || event;
if(event.keyCode != 38 && event.keyCode != 40){
val = $("#search_input").val();
dcs('http://www.google.cn/complete/search?hl=zh-CN&q=' + encodeURIComponent(val) + '&_=' + Math.random(), 'gsg');
}
if($(".tip").css("display") != 'none')
if(event.keyCode == 38){
var n = getselsect();
if(n == 1 || n==0){
$("#tip_ul li:first-child").removeClass("h1");
$("#tip_ul li:last-child").addClass("h1");
$("#search_input").val($("ul li:last-child > a").html());
} else {
$("#tip_ul li:nth-child("+n+")").removeClass("h1");
$("#tip_ul li:nth-child("+(n-1)+")").addClass("h1");
$("#search_input").val($("#tip_ul li:nth-child("+(n-1)+") > a").html());
}
}
if(event.keyCode == 40){
var n = getselsect();
if(n == $("#tip_ul li").length || n==0){
$("#tip_ul li:last-child").removeClass("h1");
$("#tip_ul li:first-child").addClass("h1");
$("#search_input").val($("ul li:first-child > a").html());
} else {
$("#tip_ul li:nth-child("+n+")").removeClass("h1");
$("#tip_ul li:nth-child("+(n+1)+")").addClass("h1");
$("#search_input").val($("#tip_ul li:nth-child("+(n+1)+") > a").html());
}
}
}
window.google = {};
window.google.ac={};
window.google.ac.h = function(a){
if(a[1] && a[1].length>1){
var str = '';
for(var i=0;i<a[1].length;i++){
str += '<li><a>'+ a[1][i][0] +'</a></li>';
}
$("#tip_ul").html(str);
};
$(".tip li").hover(
function () {
$(this).addClass("h1");
},
function () {
$(this).removeClass("h1");
}
);
if(str){
$(".tip").show();
$("#tip_ul > li > a").click(function(){
$("#search_input").val($(this).html());
$("#search_form").submit();
setTimeout("count_key()",'100');
});
}
}
function count_key()
{
setTimeout("$('.tip').hide()",'1000');
}
$(function(){
$("body").click(
function(){
$("#kwh").hide();
});
});
function getselsect()
{
var lis = document.getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
if(lis[j].className == 'h1'){
return j+1;
}
}
return 0;
}
</script>
</head>
<body id="b1">
<form id="search_form" action="http://www.baidu.com/s" target="_blank">
<div class="search">
<input type="text" id="search_input" class="searchTxt" name="wd" autocomplete="off" οnkeydοwn="showtip(event)" >
<input type="submit" class="searchBtn" value="搜索" οnclick="count_key()" >
</div>
<div class="tip" id="kwh">
<ul id="tip_ul">
</ul>
</div>
</form>
</body>
</html>