<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索联想</title> <style type="text/css"> @charset "utf-8"; * { padding:0; margin:0; border:none; text-decoration:none; list-style:none; overflow:hidden; } input, button, select, textarea { outline:none; } textarea { font-size:13px; resize:none; } body{ width:100%; height:1000px; background:#fff; } #main{ width:704px; height:500px; position:relative; top:100px; left:25%; } #content{ position:relative; border:2px solid #1FA9F0; height:32px; width:700px; } #search { width:68px; height:32px; position:absolute; color:#1FA9F0; line-height:32px; text-align:center; font-weight:bold; cursor:pointer; font-size:16px; background-image:url(http://sandbox.runjs.cn/uploads/rs/287/rdxihnzh/bg.png); background-position:0px -28px; text-indent:-5px; } #inp { width:495px; height:28px; background:none; font-size:16px; border:none; line-height:28px; color:#008ECA; position:absolute; top:2px; left:70px; } #searchimg{ width:50px; height:14px; background:url(http://sandbox.runjs.cn/uploads/rs/287/rdxihnzh/all.png) right top; position:absolute; top:9px; right:80px; } #sure{ width:75px; height:32px; background:url(http://sandbox.runjs.cn/uploads/rs/287/rdxihnzh/search.png); text-indent: -9999px; border:none; cursor:pointer; position:absolute; right:0px; top:0px; } #nav{ width:68px; height:142px; border:2px solid #1FA9F0; border-top:none; position:relative; top:-2px; display:none; z-index:50; } #nav li{ width:68px; height:28px; color:#1FA9F0; background:#fff; text-align:center; line-height:28px; font-weight:bold; cursor:pointer; font-size:16px; text-indent:-5px; } #soso_s{ border-top:2px solid #fff; } #soso_s:hover{ border-top:2px solid #1FA9F0; } #show{ width:700px; height:auto; position:absolute; border:2px solid #1FA9F0; border-top:none; top:34px; z-index:10; display:none; } #show li{ width:700px; height:20px; line-height:20px; font-size:16px; text-align:left; color:#1FA9F0; } .nowblue{ background:#1FA9F0; color:#fff !important; } .nowwhite{ background:none; color:#1FA9F0; } </style> </head> <body> <div id="main"> <form action="http://www.baidu.com/s" method="get" id="sform"> <div id="content"> <div id="search" onmouseover="navshow()">百度</div> <input name="w" type="text" value="" autocomplete="off" id="inp" x-webkit-speech=""> <div id="searchimg"></div> <input type="submit" value="搜素" id="sure"> </div> <ul id="nav" onclick="chose(event)" onmouseover="toblue(event)" onmouseout="towhite(event)"> <li id="baidu_s">百度</li> <li id="soso_s">搜搜</li> <li id="google_s">谷歌</li> <li id="sogou_s">搜狗</li> <li id="youdao_s">有道</li> </ul> </form> <div id="show"></div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var nav = document.getElementById("nav"); var sear = document.getElementById("search"); var imger = document.getElementById("searchimg"); var actioner = document.getElementById("sform"); var inp = document.getElementById("inp"); function chose(obj){ var p = obj.srcElement || obj.target; if(p.id == "soso_s"){ sear.innerHTML = p.innerHTML; imger.style.backgroundPosition = "0px 0px"; actioner.action = "http://www.soso.com/q"; inp.name = "w"; } else if(p.id == "baidu_s"){ sear.innerHTML = p.innerHTML; imger.style.backgroundPosition = "0px -14px"; actioner.action = "http://www.baidu.com/s"; inp.name = "wd"; } else if(p.id == "google_s"){ sear.innerHTML = p.innerHTML; imger.style.backgroundPosition = "0px -42px"; actioner.action = "http://www.google.com.hk/search"; inp.name = "q"; } else if(p.id == "sogou_s"){ sear.innerHTML = p.innerHTML; imger.style.backgroundPosition = "0px -28px"; actioner.action = "http://www.sogou.com/web"; inp.name = "query"; } else if(p.id == "youdao_s"){ sear.innerHTML = p.innerHTML; imger.style.backgroundPosition = "0px -56px"; actioner.action = "http://www.youdao.com/search"; inp.name = "q"; } navhide(); } function toblue(obj){ var p = obj.srcElement || obj.target; p.style.backgroundColor = "#1FA9F0"; p.style.color = "#fff"; } function towhite(obj){ var p = obj.srcElement || obj.target; p.style.backgroundColor = "#fff"; p.style.color = "#1FA9F0"; } function navshow(){ nav.style.display = "block"; sear.style.backgroundPosition = " 0px -28px" } function navhide(){ nav.style.display = "none"; sear.style.backgroundPosition = " 0px 0px" } $("#inp").keyup(function(){ $("#bdscript").remove(); $("#show li").remove(); navhide(); var srcs = "http://unionsug.baidu.com/su?wd=" + encodeURIComponent($("#inp").val()) + "&p=3&cb=baidu"; $("<script>").attr("charset", "gbk").attr("src",srcs).attr("id","bdscript").attr("type","text/javascript").appendTo("body"); baidu(); }) var baidu = function(data){ var words = ""; $("#show").show(); for(var i = 0;i<data.s.length;i++){ $("<li>").html(data.s[i]).appendTo("#show"); } $("#show li").hover(function(){ $(this).removeClass("nowwhite").addClass("nowblue"); },function(){ $(this).removeClass("nowblue").addClass("nowwhite"); }).click(function(){ $("#inp").val($(this).html()); $("#show").hide(); }) } </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 搜索联想 喜欢 (0)or分享 (0)
