js实现类似于百度学术的高级检索功能

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

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

1 <p class="fl srh-btn">
2             <input type="submit" class="srh-submit" style="height:43px" value="高级搜索" id="highSearchObj"/>
3         </p>

//省略部分调用关系

 1     this.highSearch = function () {
 2         document.getElementById(‘highSearchObj‘).disabled=true;
 3         var highSearchHtml = ‘<div class="highSearch" style="display:block"><div class="highMsg"><ul>  4                         <li><span id="tabReg" class="tab">包含关键词</span><input id="kywds" value=""></li>  5                         <li><span id="tabReg" class="tab">不包含关键词</span><input id="nokywds" value=""></li> 6                         <li><span id="tabReg" class="tab">检索范围</span> 7                         <select id="st"> 8                         <option value ="byrw">本院认为</option> 9                         <option value ="sljg">审理经过</option>10                         <option value="ygsc">原告诉称</option>11                         <option value="bgbc">被告辩称</option>12                         </select></li>13                         </ul>14             <input id="conditionObj" type="submit" value="新增一组条件"></input>15                         <hr>16             <div class="fit">17             <select id="type">18               <option value ="all">全部</option>19               <option value ="pj">判决</option>20               <option value ="cd">裁定</option>21               <option value="tz">通知</option>22               <option value="jd">决定</option>23               <option value="tj">调解</option>24             </select><select id="round">25               <option value ="all">全部</option>26               <option value ="one">一审</option>27               <option value ="two">二审</option>28               <option value="again">再审</option>29             </select>30 <input id="bg" value="2010">-<input id="end" value="2016">31 <ul><li><span id="tabReg" class="tab">案由</span><input id="ay" value=""></input></li>32     <li><span id="tabReg" class="tab">法院</span><input id="fy" value=""></input></li>33 </ul></div>34             <ul id="sql"></ul>35             <input id="submitHighSearchObj" type="submit" value="提交高级搜索"></input>36             </div></div>‘;
37         this.highSearchObj = $(highSearchHtml);
38         $("body").append(this.highSearchObj);
39         $("#conditionObj").click(function(){
40             var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\"";
41             var st=document.getElementById("st").value;
42             var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\"";
43             var sql="<li name=\"highTag\">@("+st+")("+kywds+"-"+nokywds+")</li>";
44             $("#sql").append(sql);
45         })
46         $("#submitHighSearchObj").click(function(){
47             var highTags=document.getElementsByName("highTag");
48             var tags="";
49             var filters="";
50             var round=document.getElementById("round").value;
51             var type=document.getElementById("type").value;
52             var reason=document.getElementById("ay").value.split(" ").join(",");
53             var court=document.getElementById("fy").value.split(" ").join(",");
54             var begin=document.getElementById("bg").value;
55             var end=document.getElementById("end").value;
56             if(highTags.length==0){
57                 var kywds="\""+document.getElementById("kywds").value.split(" ").join("\"&\"")+"\"";
58                 var st=document.getElementById("st").value;
59                 var nokywds="\""+document.getElementById("nokywds").value.split(" ").join("\"|\"")+"\"";
60                 tags="@("+st+")("+kywds+"-"+nokywds+")";
61             } else {
62                 for(i=0;i<highTags.length;i++){
63                     tags+=highTags[i].innerHTML;
64                 }
65             }
66             if(round !="all") {
67                 filters+=" round:"+round+";";
68             }
69             if(type !="all") {
70                 filters+=" type:"+type+";";
71             }
72             if(reason !="") {
73                 filters+=" reason:"+reason+";";
74             }
75             if(court !="") {
76                 filters+=" court:"+court+";";
77             }
78             if(begin !="" && end !="") {
79                 filters+=" year:";
80                 while(begin<=end) {
81                     filters=filters+begin+",";
82                     begin++;
83                 }
84             }
85             if(filters !="") {
86                 tags="magic:"+tags+";filter:"+filters;
87             }
88             var formObj = $(‘<form id="form" action="/search" target="_self" method="get"></form>‘);
89             var html = [‘<input type="hidden" name="type" value="1">‘];
90             html.push(‘<input type="hidden" name="keyword" value="‘ + encodeURIComponent(tags) + ‘">‘);
91             html.push(‘<input type="hidden" name="TypeKey" value="‘ + encodeURIComponent(tags) +‘">‘);
92             formObj.html(html.join(","));
93             $("body").append(formObj);
94             formObj.submit();
95         });
96 //        $("#ay").keyup(function(e){
97 //        });
98     }

第3行到第36行主要是弹窗的HTML代码。

37,38行使用了js中常用的最简单的在页面中动态修改前台的方法。

第39行和第46行均为对新增代码的动作处理，用于提交条件和子条件。

在第46行的函数里面，做了对字符串的拼接处理。

在第88行到第96行，实现了通过隐藏表单提交查询条件的js+html调用。

这样的处理方法，在富文本编辑脚本中也可以使用。