调百度等大型搜索引擎的搜索框

 

效果预览：http://runjs.cn/detail/kj3su38f

 

html代码：

    <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<div id="main">
  <form action="http://www.soso.com/q" 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="soso_s">搜搜</li>
      <li id="baidu_s">百度</li>
      <li id="google_s">谷歌</li>
      <li id="sogou_s">搜狗</li>
      <li id="youdao_s">有道</li>
    </ul>
  </form>
  <div id="show"></div>
</div>

 

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;
}

    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();    
    })
}