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调用。
这样的处理方法，在富文本编辑脚本中也可以使用。
版权声明：本文为toocooltohavefriends原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。