jQuery按栏目搜索框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery按栏目搜索框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery按栏目搜索框代码</title>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/common.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="width:530px;margin:100px auto;">
<div class="search_box">
<span class="left l_bg"></span>
<span class="right r_bg"></span>
    <div class="search">
    <form name=search_form onSubmit="return bottomForm(this);" target="_blank" method=post>
        <div id="pt1" class="select">
        <a id="s0">全站搜索</a>
        <div style="display:none;" id="pt2" class="part"> 
            <p>
            <a id="s1">JS代码</a>
            <a id="s2">PSD素材</a>
            <a id="s3">矢量素材</a>
            <a id="s4">图片素材</a>
            <a id="s5">网页特效</a>
            <a id="s6">字体素材</a>
            <a id="s7">常用软件</a>
            <a id="s8">图标素材</a>
            <a id="s9">PNG图标</a>
            <a id="s10">GIF图标</a>
            <a id="s11">网页模板</a>
            <a id="s12">QQ表情</a>
            </p>
        </div>
        </div> 
    <input id="catid" name="catid" type="hidden" value="7">
    <input id="q" class="enter" name="infos" onFocus="if(this.value=='内容…'){this.value='';}else{this.select();}this.style.color='black';"  value="内容…">
    <input class="sb" name="Input" type="submit" value="">
    </form>
    </div>
</div>
</div>
<br><br><br>
</body>
</html>

JS代码(common.js):

// search//获得Cookie解码后的值function GetCookieVal(offset){
	var endstr = document.cookie.indexOf(";
	",offset);
	if (endstr == -1) endstr = document.cookie.length;
	return unescape(document.cookie.substring(offset,endstr));
}
//设定Cookie值-将值保存在Cookie中function SetCookie(name,value){
	var expdate = new Date();
	//获取当前日期 var argv = SetCookie.arguments;
	//获取cookie的参数 var argc = SetCookie.arguments.length;
	//cookie的长度 var expires = (argc > 2) ? argv[2]:null;
	//cookie有效期 var path = (argc > 3) ? argv[3]:null;
	//cookie路径 var domain = (argc > 4) ? argv[4]:null;
	//cookie所在的应用程序域 var secure = (argc > 5) ? argv[5]:false;
	//cookie的加密安全设置 if (expires != null) expdate.setTime(expdate.getTime() + (expires * 1000));
	document.cookie = name + "=" + escape(value) + ((expires == null) ? "":(";
	expires=" + expdate.toGMTString())) + ((path == null) ? "":(";
	path=" + path)) + ((domain == null) ? "":(";
	domain=" + domain)) + ((secure == true) ? ";
	secure":"");
}
//删除指定的Cookiefunction DelCookie(name){
	var exp = new Date();
	exp.setTime(exp.getTime() - 1);
	var cval = GetCookie(name);
	//获取当前cookie的值 document.cookie = name + "=" + cval + ";
	expires=" + exp.toGMTString();
	//将日期设置为过期时间}
//获得Cookie的值-name用来搜索Cookie的名字function GetCookie(name){
	var arg = name + "=";
	var argLen = arg.length;
	//指定Cookie名的长度 var cookieLen = document.cookie.length;
	//获取cookie的长度 var i = 0;
	while (i < cookieLen){
	var j = i + argLen;
	if (document.cookie.substring(i,j) == arg) //依次查找对应cookie名的值 return GetCookieVal(j);
	i = document.cookie.indexOf(" ",i) + 1;
	if (i == 0) break;
}
return null;
}
function $$(id){
	if (document.getElementById){
	return document.getElementById(id);
}
else if (document.layers){
	return document.layers[id];
}
else{
	return false;
}
}
(function(){
	function initHead(){
	setTimeout(showSubSearch,0)}
;
	function showSubSearch(){
	$$("pt1").onmouseover = function(){
	$$("pt2").style.display = "";
	$$("pt1").className = "select select_hover"}
;
	$$("pt1").onmouseout = function(){
	$$("pt2").style.display = "none";
	$$("pt1").className = "select"}
;
	$$("s1").onclick = function(){
	selSubSearch(1);
	$$("q").focus()}
;
	$$("s2").onclick = function(){
	selSubSearch(2);
	$$("q").focus()}
;
	$$("s3").onclick = function(){
	selSubSearch(3);
	$$("q").focus()}
;
	$$("s4").onclick = function(){
	selSubSearch(4);
	$$("q").focus()}
;
	$$("s5").onclick = function(){
	selSubSearch(5);
	$$("q").focus()}
;
	$$("s6").onclick = function(){
	selSubSearch(6);
	$$("q").focus()}
;
	$$("s7").onclick = function(){
	selSubSearch(7);
	$$("q").focus()}
;
	$$("s8").onclick = function(){
	selSubSearch(8);
	$$("q").focus()}
;
	$$("s9").onclick = function(){
	selSubSearch(9);
	$$("q").focus()}
;
	$$("s10").onclick = function(){
	selSubSearch(10);
	$$("q").focus()}
;
	$$("s11").onclick = function(){
	selSubSearch(11);
	$$("q").focus()}
;
	$$("s12").onclick = function(){
	selSubSearch(12);
	$$("q").focus()}
;
}
;
	function selSubSearch(iType){
	hbb = [];
	hbb ={
	1:["JS代码","5"],2:["PSD素材","8"],3:["矢量素材","9"],4:["图片素材","9"],5:["网页特效","12"],6:["字体素材","13"],7:["常用软件","7"],8:["图标素材","10"],9:["PNG图标","10"],10:["GIF图标","10"],11:["网页模板","10"],12:["QQ表情","10"]}
;
	$$("s0").innerHTML = hbb[iType][0];
	$$("pt2").style.display = "none";
	SetCookie('sousuosss',iType);
	$$("catid").value = hbb[iType][1];
}
;
	initHead();
}
)();
	hbb = [];
	hbb ={
	1:["JS代码","5"],2:["PSD素材","8"],3:["矢量素材","9"],4:["图片素材","9"],5:["网页特效","5"],6:["字体素材","13"],7:["常用软件","7"],8:["图标素材","10"],9:["PNG图标","10"],10:["GIF图标","10"],11:["网页模板","10"],12:["QQ表情","10"]}
;
	if (GetCookie('sousuosss')){
	var sss = GetCookie('sousuosss');
	$$("s0").innerHTML = hbb[sss][0];
	$$("catid").value = hbb[sss][1];
}
function bottomForm(search_form){
	if (search_form.catid.value == 4){
	search_form.action = "http://www.97zzw.com/index.php?g=Search&q=" + encodeURI(search_form.infos.value) + "&modelid=4";
	document.search_form.submit();
	return false;
}
else if (search_form.catid.value == 5){
	search_form.action = "http://www.97zzw.com/index.php?g=Search&q=" + encodeURI(search_form.infos.value) + "&modelid=5";
	document.search_form.submit();
	return false;
}
else{
	search_form.action = "http://www.97zzw.com/index.php?g=Search&q=" + encodeURI(search_form.infos.value) + "&modelid=" + search_form.catid.value;
	document.search_form.submit();
	return false;
}
}

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body{color:#333;text-align:left;background:#fff url(../images/head_bg.gif) repeat-x top;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;font-weight:400;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
ul,ol{list-style:none;}
fieldset,img{border:0;}
img{vertical-align:middle;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
a,a:visited{color:#333;text-decoration:none;outline:none;}
a:hover,a:active,a:focus{text-decoration:underline;color:#62a315;background-color:transparent;}
.search_box{float:left;width:529px;height:40px;background:#70b515 url(../images/bg.png) no-repeat -297px -415px;padding-left:3px;display:inline;}
.search{width:529px;margin:0px;line-height:34px;height:34px;}
.search a{text-decoration:none;cursor:pointer;}
.search input{float:left;}
.select{background:#fff url(../images/bg.png) no-repeat 76px -5px;border:0;border-right:solid 2px #fff;width:82px;height:34px;color:#666;line-height:34px;padding-left:8px;float:left;position:relative;z-index:99999;font-size:14px;margin-top:3px;}
.select_hover{background:#fff url(../images/bg.png) no-repeat 76px 15px;border-right:solid 2px #70b515;}
.part{left:-3px;top:34px;width:180px;padding:4px 1px 1px;background:#fff url(../images/select_topbg.png) no-repeat left top;border:solid 3px #70b515;border-top:0;line-height:30px;position:absolute;z-index:9999;height:auto;zoom:1;-moz-border-radius:0px 0px 3px 3px;-webkit-border-radius:0px 0px 3px 3px;border-radius:0px 0px 3px 3px;}
.part p{overflow:hidden;}
.part p a{height:30px;color:#666;line-height:30px;padding-left:8px;width:82px;border-left:solid 1px #f3f3f3;border-top:solid 1px #f3f3f3;background:#fff;display:inline-block;float:left;margin-left:-1px;margin-top:-1px;white-space:nowrap;}
.part a:hover{background:#f5f5f5;color:#62a315;}
.enter{border:0;width:348px;float:left;height:34px;color:#999;line-height:34px;padding-left:5px;margin-top:3px;font-size:14px;outline:none;}
.enters{border:0;width:348px;float:left;height:34px;color:#333;line-height:34px;padding-left:5px;margin-top:3px;font-size:14px;outline:none;}
.sb{background:url(../images/bg.png) no-repeat -31px 0;border:0;width:84px;_width:81px;height:40px;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)