网站搜索

1,html部分

<form method="get" action="#" name="headSearchForm" id="headSearchForm" onsubmit="return headDoSearch();">
<input id="headSearchType" name="searchType" type="hidden" value="userSearch">
<div class="selSearch">
<div class="nowSearch" id="headSlected" onmouseover="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');">用户</div>
<div class="btnSel"><a href="#" onmouseover="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></div>
<div class="clear"></div>
<ul class="selOption" id="headSel" style="display:none;">
<li><a href="#" onclick="return search_show('head','userSearch',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">用户</a></li>
<li><a href="#" onclick="return search_show('head','tagSearch',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">话题</a></li>
</ul>
</div>
<input class="txtSearch" id="headq" name="headSearchValue" type="text" value="请输入关键字" onfocus="this.value=''"/>
<div class="btnSearch">
<a href="#" onclick="javascript:return headDoSearch();"><span class="lbl">搜索</span></a>
</div>
</form>

2，js部分

//头部搜索
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();
 try{window.clearTimeout(timer);}catch(e){}
 return false;
}
function headDoSearch() {
 var searchValue = $('#headq').val();
 var searchType = $('#headSearchType').val();
 var redirectURL = '';
 
 if(''==searchValue || 'undefined'==searchValue || '请输入关键字'==searchValue) {
  alert("请输入关键字");
 } else {
  if('userSearch'==searchType ) {
   redirectURL = 'index.php?mod=profile&code=search&keyword='+searchValue;
  } else if ('tagSearch'==searchType ) {
   redirectURL = 'index.php?mod=tag&code='+searchValue;
  } else {
   alert("未定义的操作");
  }
  
  if(''!=redirectURL) {
   window.location.href=redirectURL;
  }
 }  

 return false;
}
 

3，样式部分

/*头部搜索*/
.searchTool{width:175px; margin:0;}
.searchTool .txtSearch{float:left;width:80px;padding:2px;height:16px;border:1px solid #ccc; color:#999;background:#fff;}
.searchTool .selSearch{float:left;width:49px;background:#fff;height:20px;line-height:20px;border:1px solid #ccc;border-right:0;}
.searchTool .nowSearch{float:left;width:30px;height:20px;line-height:21px;overflow:hidden;padding-left:4px;background:#fff;cursor:pointer;}
.searchTool .btnSel{float:right;border-left:1px solid #ccc;width:14px;height:20px;background:#fff;}
.searchTool .btnSel a{background:url(../images/t1/header_s1.gif) no-repeat center center;display:block;width:14px;height:20px;}

.searchTool .selOption{z-index:9999; _position:absolute;margin-left:2px;+margin-left:-1px;_margin-left:-1px;width:48px;background:#fff;border:1px solid #ccc; padding:0; overflow:hidden;}
.searchTool .selOption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#000; width:39px;}
.searchTool .selOption a:hover{color:#fff;background:#ccc;}

.searchTool .btnSearch{float:left;margin-left:1px;width:35px;height:21px;line-height:21px;overflow:hidden;text-align:center;}
.searchTool .btnSearch a{background:url(../images/t1/sBtn_bg.gif) repeat-x;display:block;text-decoration:none;height:21px;line-height:21px;overflow:hidden;}
.searchTool .btnSearch .lbl{cursor:pointer; color:#FFF; }