基于JavaScript实现类似于百度学术高级检索功能
百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的，可以通过前台js做字符串拼接传给后台实现，难度不大：
下面是高级检索的核心功能代码，我使用的是纯js实现，并未使用jquery：
<pclass="flsrh-btn">
<inputtype="submit"class="srh-submit"style="height:px"value="高级搜索"id="highSearchObj"/>
</p>
//省略部分调用关系
this.highSearch=function(){
document.getElementById('highSearchObj').disabled=true;
varhighSearchHtml='<divclass="highSearch"style="display:block"><divclass="highMsg"><ul>\
<li><spanid="tabReg"class="tab">包含关键词</span><inputid="kywds"value=""></li>\
<li><spanid="tabReg"class="tab">不包含关键词</span><inputid="nokywds"value=""></li>\
<li><spanid="tabReg"class="tab">检索范围</span>\
<selectid="st">\
<optionvalue="byrw">本院认为</option>\
<optionvalue="sljg">审理经过</option>\
<optionvalue="ygsc">原告诉称</option>\
<optionvalue="bgbc">被告辩称</option>\
</select></li>\
</ul>\
<inputid="conditionObj"type="submit"value="新增一组条件"></input>\
<hr>\
<divclass="fit">\
<selectid="type">\
<optionvalue="all">全部</option>\
<optionvalue="pj">判决</option>\
<optionvalue="cd">裁定</option>\
<optionvalue="tz">通知</option>\
<optionvalue="jd">决定</option>\
<optionvalue="tj">调解</option>\
</select><selectid="round">\
<optionvalue="all">全部</option>\
<optionvalue="one">一审</option>\
<optionvalue="two">二审</option>\
<optionvalue="again">再审</option>\
</select>\
<inputid="bg"value="">-<inputid="end"value="">\
<ul><li><spanid="tabReg"class="tab">案由</span><inputid="ay"value=""></input></li>\
<li><spanid="tabReg"class="tab">法院</span><inputid="fy"value=""></input></li>\
</ul></div>\
<ulid="sql"></ul>\
<inputid="submitHighSearchObj"type="submit"value="提交高级搜索"></input>\
</div></div>';
this.highSearchObj=$(highSearchHtml);
$("body").append(this.highSearchObj);
$("#conditionObj").click(function(){
varkywds="\""+document.getElementById("kywds").value.split("").join("\"&\"")+"\"";
varst=document.getElementById("st").value;
varnokywds="\""+document.getElementById("nokywds").value.split("").join("\"|\"")+"\"";
varsql="<liname=\"highTag\">@("+st+")("+kywds+"-"+nokywds+")</li>";
$("#sql").append(sql);
})
$("#submitHighSearchObj").click(function(){
varhighTags=document.getElementsByName("highTag");
vartags="";
varfilters="";
varround=document.getElementById("round").value;
vartype=document.getElementById("type").value;
varreason=document.getElementById("ay").value.split("").join(",");
varcourt=document.getElementById("fy").value.split("").join(",");
varbegin=document.getElementById("bg").value;
varend=document.getElementById("end").value;
if(highTags.length==){
varkywds="\""+document.getElementById("kywds").value.split("").join("\"&\"")+"\"";
varst=document.getElementById("st").value;
varnokywds="\""+document.getElementById("nokywds").value.split("").join("\"|\"")+"\"";
tags="@("+st+")("+kywds+"-"+nokywds+")";
}else{
for(i=;i<highTags.length;i++){
tags+=highTags[i].innerHTML;
}
}
if(round!="all"){
filters+="round:"+round+";";
}
if(type!="all"){
filters+="type:"+type+";";
}
if(reason!=""){
filters+="reason:"+reason+";";
}
if(court!=""){
filters+="court:"+court+";";
}
if(begin!=""&&end!=""){
filters+="year:";
while(begin<=end){
filters=filters+begin+",";
begin++;
}
}
if(filters!=""){
tags="magic:"+tags+";filter:"+filters;
}
varformObj=$('<formid="form"action="/search"target="_self"method="get"></form>');
varhtml=['<inputtype="hidden"name="type"value="">'];
html.push('<inputtype="hidden"name="keyword"value="'+encodeURIComponent(tags)+'">');
html.push('<inputtype="hidden"name="TypeKey"value="'+encodeURIComponent(tags)+'">');
formObj.html(html.join(","));
$("body").append(formObj);
formObj.submit();
});
//$("#ay").keyup(function(e){
//});
}
第3行到第36行主要是弹窗的HTML代码。
37,38行使用了js中常用的最简单的在页面中动态修改前台的方法。
第39行和第46行均为对新增代码的动作处理，用于提交条件和子条件。
在第46行的函数里面，做了对字符串的拼接处理。
在第88行到第96行，实现了通过隐藏表单提交查询条件的js+html调用。
jqueryjs实现高级条件检索功能中检索条件切换
基本思路：
1.HTML：
使用table展示所有检索条件，使用input控件展示每一个检索条件，定义两种CSS类样式，用以区分检索条件的选中与未选中状态
2.JS实现：
为未选中的input绑定点击事件，可通过绑定未选中的样式类来实现，代码实现
function(event){//event为点击事件
$(event.target).parent().find('.条件input-selected').toggleClass('条件input-selected').toggleClass('条件input-default');
$(event.target).toggleClass('条件input-selected').toggleClass('条件input-default');
},
此时就实现了所有检索条件的自动切换