运行效果如下图所示：
具体代码如下：
<!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"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>搜索条</title> <style> /*basic*/ *{padding:0;margin:0;color:#000;font:12px/20px arial,sans-serif,"宋体";} /*elements*/ .clear{clear:both;height:0px;overflow:hidden;} ul,li,ol{list-style-type:none;list-style-position:outside;} button,.btnnormal{height:22px;line-height:18px;padding:0 9px!important;padding:0 5px;} a{color:#0042ff;text-decoration:underline;} a,a *{cursor:pointer;} a img{border:0;} .searchtool{float:left;width:520px;} .searchtool .searchextend{float:left;line-height:24px;_padding-top:5px;} .searchtool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;} .searchtool .txtsearch{float:left;width:232px;padding:2px 2px 0 2px;height:20px;line-height:20px;vertical-align:bottom;border:1px solid #3e99d4;} .searchtool .selsearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1px solid #3e99d4;border-left:0;} .searchtool .nowsearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;} .searchtool .btnsel{float:right;border-left:1px solid #3e99d4;width:14px;height:22px;} .searchtool .btnsel a{background:url(images/btn_sel.gif) no-repeat center center;display:block;width:14px;height:22px;} .searchtool .btnsel a:hover{background:url(images/btn_sel_over.gif) no-repeat center center;border:1px solid #fff;width:12px;height:20px;} .searchtool .seloption{z-index:9999;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1px solid #3e99d4;} .searchtool .seloption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#000;text-decoration:none;} .searchtool .seloption a:hover{color:#fff;background:#95d5f1;} .searchtool .btnsearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1px solid #3e99d4;overflow:hidden;} .searchtool .btnsearch a{background:url(images/bg_nav_option.gif) repeat-x center -6px;display:block;text-decoration:none;height:22px;line-height:22px;overflow:hidden;} .searchtool .btnsearch a:hover{background:url(images/bg_nav_option_over.gif) repeat-x center center;border:1px solid #fff;height:20px;line-height:20px;} .searchtool .btnsearch .lbl{cursor:pointer;display:block;width:40px;padding-left:5px;letter-spacing:5px;text-align:center;height:18px;padding-top:1px;margin:0 auto;filter:progid:dximagetransform.microsoft.dropshadow(color=#daeefa,offx=1,offy=1,positives=true);} .searchtool .btnsearch a:hover .lbl{padding-top:0px;} </style> <script> function drop_mouseover(pos){ try{window.cleartimeout(timer);}catch(e){} } function drop_mouseout(pos){ var possel=document.getelementbyid(pos+"sel").style.display; if(possel=="block"){ timer = settimeout("drop_hide(""+pos+"")", 1000); } } function drop_hide(pos){ document.getelementbyid(pos+"sel").style.display="none"; } function search_show(pos,searchtype,href){ document.getelementbyid(pos+"searchtype").value=searchtype; document.getelementbyid(pos+"sel").style.display="none"; document.getelementbyid(pos+"slected").innerhtml=href.innerhtml; document.getelementbyid(pos+"q").focus(); var se = document.getelementbyid("searchextend"); if(se != undefined && searchtype == "bar"){ se.style.display="block"; }else if(se != undefined){ se.style.display="none"; } try{window.cleartimeout(timer);}catch(e){} return false; } </script> </head> <body> <p class="searchtool"> <form method="get" action="http://so.youku.com/search_playlist" name="headsearchform" id="headsearchform" onsubmit="return dosearch(this);"> <input class="txtsearch" id="headq" name="q" type="text" value="闯关东" /> <input name="searchdomain" type="hidden" value="http://so.youku.com"> <input id="headsearchtype" name="searchtype" type="hidden" value="playlist"> <p class="selsearch"> <p class="nowsearch" id="headslected" onclick="if(document.getelementbyid("headsel").style.display=="none"){document.getelementbyid("headsel").style.display="block";}else {document.getelementbyid("headsel").style.display="none";};return false;" onmouseout="drop_mouseout("head");">专辑</p> <p class="btnsel"><a href="#" onclick="if(document.getelementbyid("headsel").style.display=="none"){document.getelementbyid("headsel").style.display="block";}else {document.getelementbyid("headsel").style.display="none";};return false;" onmouseout="drop_mouseout("head");"></a></p> <p class="clear"></p> <ul class="seloption" id="headsel" style="display:none;"> <li><a href="#" onclick="return search_show("head","video",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">视频</a></li> <li><a href="#" onclick="return search_show("head","playlist",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">专辑</a></li> <li><a href="#" onclick="return search_show("head","user",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">会员</a></li> <li><a href="#" onclick="return search_show("head","bar",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">看吧</a></li> <li><a href="#" onclick="return search_show("head","pk",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">pk擂台</a></li> </ul> </p> <p class="btnsearch"> <a href="#" onclick="javascript:return dosearch(document.getelementbyid("headsearchform"));"><span class="lbl">搜索</span></a> </p> <p class="searchextend" id="searchextend" name="searchextend" style="display:none"> <input type="radio" class="radio" name="sbt" value="post" onclick="csbt(this,this.form.sbts);" />搜贴子<input type="radio" name="sbt" value="user" onclick="csbt(this,this.form.sbts);" class="radio" />按作者搜<input type="hidden" name="sbts" value="bar"> </p> <p class="clear"></p> </form> </p> <p class="clear"></p> </p> </p> </body> </html>
以上就是javascript实现仿优酷搜索框的详细内容。