基于JavaScript实现类似于百度学术高级检索功能

百度学术http://xueshu.baidu.com/高级检索是通过前台生成后台内部高级语法来实现高级检索的，可以通过前台js做字符串拼接传给后台实现，难度不大：

下面是高级检索的核心功能代码，我使用的是纯js实现，并未使用jquery：

<p class="fl srh-btn"><input type="submit" class="srh-submit" style="height:px" value="高级搜索" id="highSearchObj"/></p> //省略部分调用关系this.highSearch = function （） {document.getElementById（"highSearchObj"）.disabled=true; var highSearchHtml = "<div class="highSearch" style="display:block"><div class="highMsg"><ul> <li><span id="tabReg" class="tab">包含关键词</span><input id="kywds" value=""></li> <li><span id="tabReg" class="tab">不包含关键词</span><input id="nokywds" value=""></li><li><span id="tabReg" class="tab">检索范围</span><select id="st"><option value ="byrw">本院认为</option><option value ="sljg">审理经过</option><option value="ygsc">原告诉称</option><option value="bgbc">被告辩称</option></select></li></ul><input id="conditionObj" type="submit" value="新增一组条件"></input><hr><div class="fit"><select id="type"><option value ="all">全部</option><option value ="pj">判决</option><option value ="cd">裁定</option><option value="tz">通知</option><option value="jd">决定</option><option value="tj">调解</option></select><select id="round"><option value ="all">全部</option><option value ="one">一审</option><option value ="two">二审</option><option value="again">再审</option></select><input id="bg" value="">-<input id="end" value=""><ul><li><span id="tabReg" class="tab">案由</span><input id="ay" value=""></input></li><li><span id="tabReg" class="tab">法院</span><input id="fy" value=""></input></li></ul></div><ul id="sql"></ul><input id="submitHighSearchObj" type="submit" value="提交高级搜索"></input></div></div>";this.highSearchObj = $（highSearchHtml）;$（"body"）.append（this.highSearchObj）;$（"#conditionObj"）.click（function（）{var kywds="""+document.getElementById（"kywds"）.value.split（" "）.join（""&""）+""";var st=document.getElementById（"st"）.value;var nokywds="""+document.getElementById（"nokywds"）.value.split（" "）.join（""|""）+""";var sql="<li name="highTag">@（"+st+"）（"+kywds+"-"+nokywds+"）</li>";$（"#sql"）.append（sql）;}）$（"#submitHighSearchObj"）.click（function（）{var highTags=document.getElementsByName（"highTag"）;var tags="";var filters="";var round=document.getElementById（"round"）.value;var type=document.getElementById（"type"）.value;var reason=document.getElementById（"ay"）.value.split（" "）.join（","）;var court=document.getElementById（"fy"）.value.split（" "）.join（","）;var begin=document.getElementById（"bg"）.value;var end=document.getElementById（"end"）.value;if（highTags.length==）{var kywds="""+document.getElementById（"kywds"）.value.split（" "）.join（""&""）+""";var st=document.getElementById（"st"）.value;var nokywds="""+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;}var formObj = $（"<form id="form" action="/search" target="_self" method="get"></form>"）;var html = ["<input type="hidden" name="type" value="">"];html.push（"<input type="hidden" name="keyword" value="" + encodeURIComponent（tags） + "">"）;html.push（"<input type="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调用。
jquery js实现高级条件检索功能中检索条件切换
基本思路：
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" ）;},

此时就实现了所有检索条件的自动切换