本文实例讲述了js实现youku的漂亮搜索框效果。分享给大家供大家参考。具体如下：
运行效果如下图所示：
JSP网上书店完整源代码
下载
jsp+JavaScript+struts+hibernate+css+mysql的网上书店(源码完整直接运行，高仿真数据库记录，身临其境网上购书吧！)和国内最好的网上书店-------当当网的框架相同，包括顾客的购物车、订单管理和留言板，支持商品搜索；后台管理员的商品、订单、会员、系统管理。界面优美，功能齐全，不可多得的优秀作品。
具体代码如下：
zuojiankuohaophpcn!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
zuojiankuohaophpcnhtml xmlns="http://www.w3.org/1999/xhtml">
zuojiankuohaophpcnHTML>
zuojiankuohaophpcnHEAD>
zuojiankuohaophpcnmeta http-equiv="Content-Type" content="text/html; charset=utf-8" />
zuojiankuohaophpcnTITLE>搜索条zuojiankuohaophpcn/TITLE>
zuojiankuohaophpcnstyle>
/*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;}
zuojiankuohaophpcn/style>
zuojiankuohaophpcnscript>
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;
}
zuojiankuohaophpcn/script>
zuojiankuohaophpcn/HEAD>
zuojiankuohaophpcnBODY>
zuojiankuohaophpcnp class="searchTool">
zuojiankuohaophpcnform method="get" action="http://so.youku.com/search_playlist" name="headSearchForm" id="headSearchForm" onsubmit="return dosearch(this);">
zuojiankuohaophpcninput class="txtSearch" id="headq" name="q" type="text" value="闯关东" />
zuojiankuohaophpcninput name="searchdomain" type="hidden" value="http://so.youku.com">
zuojiankuohaophpcninput id="headSearchType" name="searchType" type="hidden" value="playlist">
zuojiankuohaophpcnp class="selSearch">
zuojiankuohaophpcnp 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");">专辑zuojiankuohaophpcn/p>
zuojiankuohaophpcnp class="btnSel">zuojiankuohaophpcna 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");">zuojiankuohaophpcn/a>zuojiankuohaophpcn/p>
zuojiankuohaophpcnp class="clear">zuojiankuohaophpcn/p>
zuojiankuohaophpcnul class="selOption" id="headSel" style="display:none;">
zuojiankuohaophpcnli>zuojiankuohaophpcna href="#" onclick="return search_show("head","video",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">视频zuojiankuohaophpcn/a>zuojiankuohaophpcn/li>
zuojiankuohaophpcnli>zuojiankuohaophpcna href="#" onclick="return search_show("head","playlist",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">专辑zuojiankuohaophpcn/a>zuojiankuohaophpcn/li>
zuojiankuohaophpcnli>zuojiankuohaophpcna href="#" onclick="return search_show("head","user",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">会员zuojiankuohaophpcn/a>zuojiankuohaophpcn/li>
zuojiankuohaophpcnli>zuojiankuohaophpcna href="#" onclick="return search_show("head","bar",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">看吧zuojiankuohaophpcn/a>zuojiankuohaophpcn/li>
zuojiankuohaophpcnli>zuojiankuohaophpcna href="#" onclick="return search_show("head","pk",this)" onmouseover="drop_mouseover("head");" onmouseout="drop_mouseout("head");">PK擂台zuojiankuohaophpcn/a>zuojiankuohaophpcn/li>
zuojiankuohaophpcn/ul>
zuojiankuohaophpcn/p>
zuojiankuohaophpcnp class="btnSearch">
zuojiankuohaophpcna href="#" onclick="javascript:return dosearch(document.getElementById("headSearchForm"));">zuojiankuohaophpcnspan class="lbl">搜索zuojiankuohaophpcn/span>zuojiankuohaophpcn/a>
zuojiankuohaophpcn/p>
zuojiankuohaophpcnp class="searchExtend" id="searchExtend" name="searchExtend" style="display:none">
zuojiankuohaophpcninput type="radio" class="radio" name="sbt" value="post" onclick="csbt(this,this.form.sbts);" />搜贴子zuojiankuohaophpcninput type="radio" name="sbt" value="user" onclick="csbt(this,this.form.sbts);" class="radio" />按作者搜zuojiankuohaophpcninput type="hidden" name="sbts" value="bar">
zuojiankuohaophpcn/p>
zuojiankuohaophpcnp class="clear">zuojiankuohaophpcn/p>
zuojiankuohaophpcn/form>
zuojiankuohaophpcn/p>
zuojiankuohaophpcnp class="clear">zuojiankuohaophpcn/p>
zuojiankuohaophpcn/p>
zuojiankuohaophpcn/p>
zuojiankuohaophpcn/BODY>
zuojiankuohaophpcn/HTML> 
